1. ホーム
  2. javascript

[解決済み] AngularJS:AngularJSがテンプレートをレンダリングした後に、追加のコードを実行するにはどうすればよいですか?

2022-04-20 08:19:25

質問

DOMにAngularのテンプレートがあります。 コントローラがサービスから新しいデータを取得すると、$scopeのモデルが更新され、テンプレートが再レンダリングされます。 これまでのところ、すべて良好です。

問題は、テンプレートが再レンダリングされてDOMに入った後に、さらにいくつかの追加作業を行う必要があることです(この場合、jQueryプラグイン)。

AfterRenderのようなリッスンするイベントがあってもよさそうなものですが、そのようなものは見当たりません。 ディレクティブを使えばいいのかもしれませんが、それも早すぎるような気がします。

以下は、私の問題の概要を説明したjsFiddleです。 フィドル-AngularIssue

== UPDATE === アップデート

参考になったコメントをもとに、DOM操作を行うディレクティブに変更し、ディレクティブ内にモデル$watchを実装しています。 しかし、まだ同じ基本的な問題があります。$watchイベント内のコードは、テンプレートがコンパイルされ、DOMに挿入される前に実行されるため、jqueryプラグインは常に空のテーブルを評価することになります。

興味深いことに、非同期呼び出しを削除すると、全体が正常に動作するようになりました。

これらの変更を反映させるために更新したFiddleは以下の通りです。 http://jsfiddle.net/uNREn/12/

解決方法は?

この投稿は古いですが、私はあなたのコードを変更します。

scope.$watch("assignments", function (value) {//I change here
  var val = value || null;            
  if (val)
    element.dataTable({"bDestroy": true});
  });
}

見る jsfiddle .

お役に立てれば幸いです。