3

私のページでは、AngularJS の html テンプレートは通常どおりコントローラーの変数にバインドされています。私は WebSockets を使用しており、新しいアイテムを受け取ると、スコープの値を更新し、angular の $apply を呼び出します。これは正常に機能し、AngularJS は、追加/削除された新しいアイテムをレンダリングするビューを正しく更新します...

トリッキーな部分は、 Isotopeプラグインをミックスに持ち込むことです。コンテンツは動的であるため、Isotope ( http://isotope.metafizzy.co/docs/adding-items.html ) にアイテムを追加することは、いくつかの理由で単純ではありません。

  • コントローラーのデータを更新して apply angular を呼び出すと、必要な追加要素が作成されます。
  • 同位体では、追加する各アイテムを知る必要があります。
  • AngularJS がどの html アイテムが作成されたかをコントローラーに伝える方法はないと思います。

誰かがこれらの 3 つの部分を一緒に動作させたことがありますか? HTML を作成して Isotope に渡す方法はありますか?

4

2 に答える 2

4

ビュー/HTMLを生成するためにng-repeatを使用していると仮定します。

試すことができるものは次のとおりです。ディレクティブを作成し、それをng-repeat（s）と同じ要素にアタッチします。priority最後に（または他のディレクティブの後に）実行されるようにディレクティブを設定します。ディレクティブのリンク関数に、Webソケット情報の結果として更新したのと同じ$ scopeプロパティを監視させます（または、何かが変更されるたびにインクリメントするスコープ上にある種のカウンターを作成できると思います-そのカウンターを監視しますディレクティブ）。ディレクティブ/ウォッチが変更を検出したら、（リンク関数のelement属性を介して）新しいHTMLを抽出し、それをアイソトープに送信します。

おそらく、どのアイテムが追加/削除されたかを判断するために、ウォッチコールバックがアクセスできるいくつかのスコーププロパティをコントローラーに設定する必要があります。

link: function(scope, element, attrs, someController) {
    scope.$watch(..., function(newValue) {
       // extract HTML with Angular or jQuery
       var children = element.children();
       for(i=scope.first_new_item; i<= scope.last_new_item; i++) {
           $('#isotope_container').isotope('insert'), children[i]);
       }
       // handle removed items similarly ??
    }

contents（）はchildren（）よりもうまく機能するか、jQueryセレクターを使用する可能性があります。

于 2013-01-13T04:22:44.127 に答える