Compile angularjs template to show in notification

Question

I want to use this library ( http://pinesframework.org/pnotify/ ) in my angularjs project

to show error alerts here, simple use for it:

$.pnotify({ title: 'Oh No!', text: text OR HTML, type: 'error' }); 

I want to show the errors that I received as JSON in the notification, but I cannot add html with angular tags to this notification.

This is what I was trying to do (I am calling it from a service and I am passing $ scope to a function):

  scope.errors = {"errors":[{"text":"error1"},{"text":"error2"}]}; var htmlTemplate = '<p ng-repeat = "error in errors.errors">{{error.text}}</p>'; var result = $compile(htmlTemplate)(scope); 

Then

  $.pnotify({title: title, text: result, type: 'error', }); 

but the notification just shows [object Object]

if i tried adding it to a div like this it works fine

  result.appendTo($("#someDiv")); 

I tried to solve it, but nothing worked for me, I want to solve it from the corner, without changing the library for my business.

thank

Answer 1

The solution I came across includes $ compile () in the template after pnotify adds it to the DOM. To find out where it is in the DOM after adding pnotify, I used the addClass parameter to add the dummy class myClazz . Then I used the jQuery selector to find it:

 var htmlTemplate = '<p ng-repeat = "error in errors.errors">{{error.text}}</p>'; $.pnotify({ title: 'title', text: htmlTemplate, type: 'error', addclass: 'myClazz' }); // now that htmlTemplate has been added to the DOM, $compile it var element = $('.myClazz'); $compile(element)(scope); 

Fiddle

Please note that manipulations with the DOM should really be done in the directive, and not in the service.

Answer 2

Looking at your jsfiddle: jsfiddle.net/bh6kX/19 I have a few comments before we respond.

The compilation function does not return html, it returns a link function that is used to bind a template (DOM element / tree) to the docs area . You also do not need to compile anything, since it looks like pnotify (with which I have no experience) takes direct text as a parameter. Therefore, after passing through your variable, an error that I reduced to:

 var errors = [{"text":"error1"},{"text":"error2"}]; 

And just by joining the text together, I passed this to ptnoify and it worked. The style does not exist, but I have a feeling that just jsfiddle does not like css.

script : http://jsfiddle.net/rtCP3/36/