prismic-html

[swrocket]

I can't seem to get this to ever work.

I'm running a query in my controller and getting back good data. But the directive shows nothing (the

 tag at the end shows the results fine.)
controller code:
Prismic.query('[[:d = fulltext(my.product.name, "Coconut")]]').then(function(data) {
self.data = data;
}, function(err){
alert('error');
});

html code:
<prismic-html fragment="main.data.product.name"></prismic-html>
<pre> {{main.data | json}} </pre>
            

[joshualinog]

do you mind outputting the "good data" here? an easy way in chrome is to pull up the chrome inspector , expand the data object/array in the inspector, screenshot it, and paste it here in github. i've used the provider and directive in multiple projects and had to do a little configuration in the beginning, but since then have had no problems. also, do you mind just commenting on the structure you are using (saying you're using angular would be too vague; for example, i typically use the meanjs stack http://meanjs.org/)

[swrocket]

I actually figured it out. I assumed that the directive would parse the doc itslef, but after looking through the code I realized I must parse it down to the fragment myself. Maybe I am using the wrong query... I am using the MEAN stack along with satellizer and passport for authentication. Here is the new code in the controller followed by the HTML (main is the controllerAs name) and then query result.

Prismic.query('[[:d = fulltext(my.product.name, "Coconut")]]').then(function(data) {
    self.data = data;
    self.fragmentName = data.results[0].fragments['product.name'];
    self.fragmentImage = data.results[0].fragments['product.image'];
}, function(err){
    alert('error');
});
`<prismic-html fragment="main.fragmentName"></prismic-html>`
`<prismic-html fragment="main.fragmentImage"></prismic-html>`

{ "page": 1, "results_per_page": 20, "results_size": 1, "total_results_size": 1, "total_pages": 1, "next_page": null, "prev_page": null, "results": [ { "id": "UlfoxUnM0wkXYXbg", "uid": null, "type": "product", "href": "https://lesbonneschoses.prismic.io/api/documents/search?ref=UlfoxUnM08QWYXdl&q=%5B%5B%3Ad+%3D+at%28document.id%2C+%22UlfoxUnM0wkXYXbg%22%29+%5D%5D", "tags": [ "Macaron", "Featured" ], "slug": "cool-coconut-macaron", "slugs": [ "cool-coconut-macaron", "coconut-macaron" ], "fragments": { "product.name": { "type": "StructuredText", "value": [ { "type": "heading1", "text": "Cool Coconut Macaron", "spans": [] } ] }, "product.short_lede": { "type": "StructuredText", "value": [ { "type": "heading2", "text": "An island of flavours", "spans": [] } ] }, "product.description": { "type": "StructuredText", "value": [ { "type": "paragraph", "text": "If you ever met coconut taste on its bad day, you surely know that coconut, coming from bad-tempered islands, can be rough sometimes. That is why we like to soften it with a touch of caramel taste in its ganache. The result is the perfect encounter between the finest palm fruit and the most tasty of sugarcane's offspring.", "spans": [] } ] }, "product.image": { "type": "Image", "value": { "main": { "url": "https://prismic-io.s3.amazonaws.com/lesbonneschoses/79a7a068ceb47892ac8de2480e878962d8b93cc6.png", "alt": "", "copyright": "", "dimensions": { "width": 500, "height": 500 } }, "views": { "icon": { "url": "https://prismic-io.s3.amazonaws.com/lesbonneschoses/b12819d149a0e6c6cd6717dba4b2c6a1bdafa9d4.png", "alt": "", "copyright": "", "dimensions": { "width": 250, "height": 250 } } } } }, "product.allergens": { "type": "Text", "value": "" }, "product.price": { "type": "Number", "value": 2.5 }, "product.flavour": [ { "type": "Select", "value": "" }, { "type": "Select", "value": "Chocolate" } ], "product.gallery": [ { "type": "Image", "value": { "main": { "url": "https://prismic-io.s3.amazonaws.com/lesbonneschoses/71925289ed70e89812a4040de310f0a8b97a2375.jpg", "alt": "", "copyright": "", "dimensions": { "width": 1500, "height": 500 } }, "views": { "squared": { "url": "https://prismic-io.s3.amazonaws.com/lesbonneschoses/2d21ec2fc5bcde736867360885c291770d9ec0c4.jpg", "alt": "", "copyright": "", "dimensions": { "width": 500, "height": 500 } }, "small": { "url": "https://prismic-io.s3.amazonaws.com/lesbonneschoses/163483658e10f5bad8ee69c29ed313699ea792b8.jpg", "alt": "", "copyright": "", "dimensions": { "width": 150, "height": 50 } } } } } ], "product.testimonial_quote": { "type": "StructuredText", "value": [ { "type": "paragraph", "text": "With a flavor as self-centered as coconut, it's rather easy to give it the starring role, and not worry about the rest. Les Bonnes Choses did exactly the opposite, marrying it with one of the least expected flavor, and effortlessly creating a whole new experience, a redefinition of the raw material.", "spans": [] } ] }, "product.testimonial_author": { "type": "StructuredText", "value": [ { "type": "heading3", "text": "Chef Drobi", "spans": [] } ] }, "product.color": { "type": "Color", "value": "#d4bf43" }, "product.related": [ { "type": "Link.document", "value": { "document": { "id": "UlfoxUnM0wkXYXbH", "type": "product", "tags": [ "Macaron" ], "slug": "vanilla-macaron" }, "isBroken": false } }, { "type": "Link.document", "value": { "document": { "id": "UlfoxUnM0wkXYXbG", "type": "product", "tags": [ "Macaron" ], "slug": "black-white-macaron" }, "isBroken": false } } ] } } ] }

[joshualinog]

I prefer to use a service I created that returns a promise to query prismic, and i wait for that to resolve on the main route before I let it load; here is my initial query (which i use a parameter to the service I created): [[:d = at(document.type,"siteContent")]]; "siteContent" is the name of the document I created. Upon receiving the document I am free to traverse the object via for loops and write the necessary subcomponents to the scope of whatever controller i am in as necessary; e.g. $scope.gallery = initialData.siteContent.content[0].gallery.value; honestly, because most of this stuff are the things I created myself via document masks, I just write it to the rootScope (i know, bad practice) so it's available application wide.

[joshualinog]

in the above instance, gallery was a document of type "Group" so gallery.value is actualy an array which I can then loop through before in the controller for data configuration (e.g. $sce.trustAsHtml), or in the view via ng-repeat.

[joshualinog]

typically what you write in the directive fragment attribute is the property that precedes the ".value" property; so i would write:

<span prismic-html fragment="currentProduct.name"></span>

but i would know that the ".value" property of currentProduct.name is what is going to be parsed into html by angular.

[swrocket]

Do I need to pass gallery.value to the directive?

Andrew Merisanu

"Wealth, I said, and poverty; the one is the parent of luxury and indolence, and the other of meanness and viciousness, and both of discontent." Plato, The Republic

On Sep 28, 2015, at 7:46 AM, Joshua Andrew Jourdain notifications@github.com wrote:

in the above instance, gallery was a document of type "Group" so gallery.value is actualy an array which I can then loop through before in the controller for data configuration (e.g. $sce.trustAsHtml), or in the view via ng-repeat.

— Reply to this email directly or view it on GitHub.

[joshualinog]

in your data above: fragments.value.['product.gallery'].value

[swrocket]

perfect, work great now. Thanks. I am having some display issues with content that has a bulleted list. The html has the UL and LI elements, but the list-item-style doesn't show. Must be something in my particular app.

Thanks again.