Compile angularjs template to show on a notification

Question

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

to show error notifications here is a simple usage for it :

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

What i want is showing the errors i got as JSON on a notification, but i cant add html with angular tags in this notification.

This is what i tried to do (Im calling it from a service and i am passing the $scope to the 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 show [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 angularjs side not by changing the library for my case.

Thanks

Result is a html element, not a String. You probably need 'result.innerHTML'. — asgoth, Dec 25 '12 at 22:25
@MathewBerg i created this jsfiddle (this is worst jsfiddle u will see :)) http://jsfiddle.net/bh6kX/19/ — ibmkhd, Dec 25 '12 at 22:31
@asgoth i tried result.innerHTML and result.html() but both of them didnt work. — ibmkhd, Dec 25 '12 at 22:32

Mark Rajcok · Accepted Answer · 2013-01-09T20:48:11.417

1

The solution I came up with involves $compile()ing the template after pnotify adds it to the DOM. To find out where it is in the DOM after pnotify adds it, I used the addClass parameter to add a dummy class called myClazz. I then used a 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

Note that the DOM manipulation should really be done in a directive, not a service.

edited Jan 09 '13 at 20:48

answered Dec 26 '12 at 21:36

Mark Rajcok

362,217
114
495
492

1

Event better, Function $.pnotify returns the jQuery element that has been added to the DOM, so yo can use it to simplify the code: ```$compile($.pnotify({title:'title', text:htmlTemplate, type:'error'}),scope);``` – David Jesse Jan 11 '14 at 18:18

score 0 · Answer 2 · answered Dec 25 '12 at 22:52

After looking at your jsfiddle: jsfiddle.net/bh6kX/19 I have a few comments before we get to the answer.

The compile function does not return html, it returns a link function which is used to bind template (a DOM element/tree) to a scope docs. You also don't need to compile anything as it looks like pnotify (Which I have no experience with) takes direct text as the parameter. So after looping through your error variable, which I've shortened to just:

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

And just joining the text together, I passed that into ptnoify and it worked. The styling isn't there, but i have a feeling that's just jsfiddle not liking the css.

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

but i want to use an angulajs template not by looping and concatenating in future the error will have more text. — ibmkhd, Dec 26 '12 at 08:20

Compile angularjs template to show on a notification

2 Answers2

Linked