I am testing out the mirror api and so far I have a sample app running nicely.
The issue I am having is that I added a menu item for the action 'SHARE' but when I try to share the timeline card created by my app to Google+ it posts an empty Google+ post. The only text in the Google+ post is #throughglass. The contents of the timeline card is some simple html (see below) which renders find on glass. I also set the speakable text which works great with the 'READ_ALOUD' menu action. What gives on the 'SHARE' action, am I missing something?
Link to Google+ post
Timeline Item html:
<article class="auto-paginate">
<section>
<p class="text-auto-size">
Hello Word.
</p>
</section>
</article>
Each application is free to choose what, from the shared timeline item, it will use as part of the share command. The Google+ Glassware appears to use the text field only when sharing a textual item and ignores the html field.
(This makes some sense. Google+ can't display the HTML formatting, so it chooses to go with the text that it knows should be good.)
When you're writing Glassware, you should make sure both the text and html (and speakableText, for that matter) fields contain the correct representation of your item.
Related
My web-app is written by AngularJs+ ui-router.
The web-app contains many forms (the number of forms are vary, depending on the application the user is applying). Each form has a ui-route state, so our users can go to each form and fill the information.
Before users submit the application we would like to implement a "summary/review" state(page) that contains all the forms the user filled, so users can review (and print) all the information from one page. Is there any way I can use the same form template (templateUrl) for the summary page?
I was thinking to use ng-include and programmatically(ng-repeat) list out all the selected forms, but it seems doesn't work.
PS: my form template might use different controller..
OK, I figured this out.
For ng-include: we need to use
<ng-include src="'formPath'"></ng-include>
For putting the ng-include in a repeater:
<div ng-repeat="f in vm.thisApp.RequiredForms">
<ng-include src="f.FormPath"></ng-include>
</div>
I hope this helps anyone who needs the answer.
I am a newbie at the MEAN stack. I have a full app working and have searched extensively on how to solve the following problem but I'm realizing that I don't know how to "ask" the question to be sent to the proper resource.
I have a marketplace. In the dashboard, a user can enter details about their product (a boat) and it is sent to the DB. In my marketplace, I'm retrieving all of the boats from the DB and theyre styled and listed on the page.
I want a user to click on one of the tiles components that I have created with an ng-list (boat) and be sent to a new page with a fully-expanded view of that specific boat. (larger pictures, expanded details, etc.) basically all the details about the product that won't fit in the minimalistic tile component in the marketplace.
How do I pass data about that specific boat that the user clicks on and be sent to a new page? Is this an ng-directive? an API/route thing?
I just am unsure how to reference the specific boat from the list i'm retrieving and have the user sent to a new details page. Any direction or resources that will teach me to solve this problem?
In general, use ng-repeat to display a list of products and ng-click to handle clicks.
<a ng-repeat="product in productList" ng-click="goto($index)">
<h2> {{product.title}}</h2>
<img ng-src="{{product.picture}}">
<p>{{product.description}}</p>
</a>
JS
$scope.goto = function(index) {
$location(productList[index].location);
});
Use a router such as ngRoute or ui-route to intercept the new location and load the appropriate template and controller.
The issue is best illustrated in the plunker - http://plnkr.co/edit/9DYQ3rlmiMK9bdtjyYOA.
Basically, I am trying to create a meta form rendering engine using angular with the help of directives that handle interpretation of data runtime and render the fields accordingly.
Please let me know if you have any ideas why the dyn-ng-repeat directive is not rendering the three URL fields under the user object as expected in the code below -
<div dyn-ng-repeat="item in {{field.model}}">
<div ng-repeat="field in field.children" ng-include src="'field.html'">/div>
</div>
Thanks.
EDIT:
Hi guys, I have created a full Plunker here - http://plnkr.co/edit/cFreJZbluy3w4R9PZUCD?p=preview that should have all the code necessary but not working.
Basically, there is a hierarchy of objects. Social Networks have URLS and a list of Friends. The code is supposed to display three social networks and each should have two friends listed under them. The button 'Add Network' should add another social network to the list and the button 'Remove Network' should remove the respective network associated with it along with all its children. Similarly, 'Add Friend' should add a new friend object under that Social Network and 'Remove Friend' should remove the respective friend from under that network.
It's a bit complex, but if you look at it for a couple of minutes, you'll get the idea of what I'm trying to do here. It's dynamic DOM based on the data elements that are bound two way.
Thanks.
I am using AngularJS to develop an application. Below is my requirement is like:
User should have search screen to search batch information
once the result is loading, user is click on one of the batch
after opening a batch
When user click on Cancel batch, previous search screen should be open
I am using model dialogue to load search screen and also to display batch information. I am using model dialogue because in my batch information screen, lot of information is available.
This approach is suggested by the client. Please help me how to achieve this approach.
I think angular-ui helps you to manipulate with modal dialogues.
1)
Search: <input ng-model="query">
<ul>
<li ng-repeat="object in OBJECTS| filter:query">
{{object .name}}
</li>
</ul>
where OBJECTS iterable model in scope
this will show filtered li's
rest of your questions are not clear
I'm trying to figure out how to link an html picture element back to the database entry that was originally used to generate the picture link.
I am using Meteor:
- I have a database that contains photosets data from Flickr API
- In the HTML, I have a handlebar "each" script that iterates through each photoset in the database and then uses this info to generate the html for the photoset cover picture links.
- When the html renders, the photoset cover pictures are downloaded from Flickr and displayed to the screen.
I would like to be able to click on the photoset cover picture and then automatically generate the links to the pictures in the photoset. But I don't understand how to dynamically link the html picture elements back to their respective database entries that were originally used for generating the picture links. I need to be able to find the original database entries so that I can load the info needed for generation of subsequent links.
As a newb to all of this I'm not really sure where to start looking or what to try. I've wondered about creating an object with custom key pairs to 'memorise' the identity of each photoset picture. Is this the way to go, or is there an easier way that I am overlooking?
Thanks.
Say you have your pictures being put out this way:
Template.mytemplate.helpers({
picture:function() {
return pictures.find()
}
});
You can also do this instead, which is pretty much the same thing:
Template.mytemplate.picture = function() {
return pictures.find();
}
With the html
<template name="pictures">
{{#each picture}}
<img src="{{src}}" class="pictureselector"/>
{{/each}}
</template>
You can use events which can get data from that particular picture document/record
Template.mytemplate.events({
'click .pictureselector':function(event,template) {
console.log(this._id); //Should give you the `_id` of the picture that was clicked
}
});
this is the data context of the element that was clicked & generate the link you want using the data inside this.
Be careful if you use something with a callback inside the click like Meteor.call, you will have to relay the message down via var self = this otherwise the context of this would become the one of Meteor.call