2

このライブラリ（ http://pinesframework.org/pnotify/）をangularjsプロジェクトで使用したい

ここにエラー通知を表示するのは簡単な使用法です：

    $.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答えに到達する前にいくつかコメントがあります。

コンパイル関数はhtmlを返しません。テンプレート（DOM要素/ツリー）をスコープドキュメントにバインドするために使用されるリンク関数を返します。また、pnotify（私は経験がありません）がパラメーターとして直接テキストを受け取るように見えるので、何もコンパイルする必要はありません。したがって、エラー変数をループした後、これを次のように短縮しました。

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

そして、テキストを結合するだけで、それをptnoifyに渡して、機能しました。スタイリングはありませんが、cssが気に入らないのはjsfiddleだけだと感じています。

フィドル： http： //jsfiddle.net/rtCP3/36/

于 2012-12-25T22:52:14.723 に答える