2

我想在我的 angularjs 项目中使用这个库（ http://pinesframework.org/pnotify/ ）

在这里显示错误通知是一个简单的用法：

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

我想要的是在通知中显示我收到的 JSON 错误，但我无法在此通知中添加带有角度标签的 html。

这就是我试图做的（我从服务调用它，我将 $scope 传递给函数）：

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

然后

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

但通知只是显示[object Object]

如果我尝试将它添加到这样的 div 中，它可以正常工作

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

我试图解决它，但对我没有任何效果，我想从 angularjs 方面解决它，而不是通过为我的案例更改库。

谢谢

4

2 回答 2

2

我想出的解决方案涉及在 pnotify 将模板添加到 DOM 之后对模板进行 $compile()。为了在 pnotify 添加它之后找出它在 DOM 中的位置，我使用该addClass参数添加了一个名为myClazz. 然后我使用 jQuery 选择器找到它：

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);

小提琴

请注意，DOM 操作实际上应该在指令中完成，而不是在服务中。

于 2012-12-26T21:36:58.330 回答
0

在查看您的 jsfiddle 之后：jsfiddle.net/bh6kX/19 在我们得到答案之前我有一些评论。

compile 函数不返回 html，它返回一个链接函数，用于将模板（DOM 元素/树）绑定到范围docs。您也不需要编译任何东西，因为它看起来像 pnotify （我没有经验）将直接文本作为参数。因此，在遍历您的错误变量之后，我将其缩短为：

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

只是将文本连接在一起，我将它传递给 ptnoify 并且它起作用了。样式不存在，但我感觉这只是 jsfiddle 不喜欢 css。

小提琴：http: //jsfiddle.net/rtCP3/36/

于 2012-12-25T22:52:14.723 回答