[解決済み] 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 .
お役に立てれば幸いです。
関連
-
[解決済み】エラー。Ionic使用中にモジュール '../lib/utils/unsupported.js' が見つかりませんでした。
-
フロントエンド null のプロパティ 'disabled' を読み取れない 問題が解決された
-
[解決済み] AngularJSでデータバインディングはどのように機能するのですか?
-
[解決済み] JavaScript でオブジェクトが特定のプロパティを持つかどうかを確認するにはどうすればよいですか?
-
[解決済み] どのDOM要素にフォーカスがあるかを調べるには?
-
[解決済み] jQuery Ajax呼び出し後のリダイレクトリクエストを管理する方法
-
[解決済み] スクロールした後に要素が表示されているかどうかを確認するには?
-
[解決済み] AngularJSを使用して、ブラウザのコンソールで$scope変数にアクセスするにはどうすればよいですか?
-
[解決済み] AngularJSで$scope.$watchと$scope.$applyを使用するにはどうすればよいですか?
-
[解決済み] ページロード後にJavaScriptを実行させるには?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
JavaScriptにおけるマクロタスクとミクロタスクの詳細
-
HTML+CSS+JavaScriptで簡単な三目並べゲームを作成する。
-
vueのプロジェクトでモックを使用する方法を知っていますか?
-
Vueの「データを聴く」原則を解説
-
Vueのフォームイベントのデータバインディングの説明
-
Vueの一般的な組み込みディレクティブの説明
-
[解決済み】JavaScriptでインラインIF文の書き方は?
-
[解決済み】 env: node: macにそのようなファイルやディレクトリはありません
-
[解決済み】(Google Map API) Geocodeは以下の理由で成功しませんでした。REQUEST_DENIED
-
[解決済み】ReactJSでエラー発生 Uncaught TypeError: Super expression は null か関数でなければならず、undefined ではありません。