[解決済み] Angular JSディレクティブのポストレンダリングコールバックはありますか?
質問
私は、このように要素に追加するためにテンプレートを取り込むディレクティブを手に入れました。
# CoffeeScript
.directive 'dashboardTable', ->
controller: lineItemIndexCtrl
templateUrl: "<%= asset_path('angular/templates/line_items/dashboard_rows.html') %>"
(scope, element, attrs) ->
element.parent('table#line_items').dataTable()
console.log 'Just to make sure this is run'
# HTML
<table id="line_items">
<tbody dashboard-table>
</tbody>
</table>
また、DataTablesというjQueryプラグインを使用しています。一般的な使い方は、$('table#some_id').dataTable()のような感じです。dataTable()の呼び出しにJSONデータを渡してテーブルデータを提供することもできますし、ページ上にすでにデータがあれば残りを処理してくれることもできます...。私は後者で、HTMLページ上にすでに行がある状態にしています。
しかし、問題は、DOM readyの後にtable#line_itemsのdataTable()を呼び出さなければならないことです。私の上記のディレクティブは、テンプレートがディレクティブの要素に追加される前に、dataTable()メソッドを呼び出します。追加された後に関数を呼び出すことができる方法はありますか?
助けてくれてありがとうございます。
Andyの回答後のUPDATE1です。
私はlinkメソッドがページ上のすべてが終わった後にのみ呼び出されることを確認したいので、私は小さなテストのためにディレクティブを変更しました。
# CoffeeScript
#angular.module(...)
.directive 'dashboardTable', ->
{
link: (scope,element,attrs) ->
console.log 'Just to make sure this gets run'
element.find('#sayboo').html('boo')
controller: lineItemIndexCtrl
template: "<div id='sayboo'></div>"
}
そして、div#saybooに"boo"が確かに表示されています。
次に、私のjquery datatableの呼び出しを試してみます。
.directive 'dashboardTable', ->
{
link: (scope,element,attrs) ->
console.log 'Just to make sure this gets run'
element.parent('table').dataTable() # NEW LINE
controller: lineItemIndexCtrl
templateUrl: "<%= asset_path('angular/templates/line_items/dashboard_rows.html') %>"
}
運が悪い
次に、タイムアウトを追加してみます。
.directive 'dashboardTable', ($timeout) ->
{
link: (scope,element,attrs) ->
console.log 'Just to make sure this gets run'
$timeout -> # NEW LINE
element.parent('table').dataTable()
,5000
controller: lineItemIndexCtrl
templateUrl: "<%= asset_path('angular/templates/line_items/dashboard_rows.html') %>"
}
で、うまくいきました。では、タイマーを使わないバージョンのコードでは何が間違っているのでしょうね?
どのように解決するのですか?
2番目のパラメータである "delay" が提供されていない場合、デフォルトの動作はDOMのレンダリングが完了した後に関数を実行することです。そのため、setTimeoutの代わりに、$timeoutを使用します。
$timeout(function () {
//DOM has finished rendering
});
関連
-
[解決済み】npm UNMET PEER DEPENDENCYの警告を修正するにはどうすればいいですか?
-
[解決済み】Angularjsのng-viewが動作しない。
-
[解決済み] AngularJSの.$uibModalとは何ですか?
-
[解決済み] AngularJSのシンプルな "Hello, world "が動作しない。
-
[解決済み] シンプルなangularjsの日付入力
-
[解決済み] 新しい/分離されたスコープを求める複数のディレクティブ [ngController, ...] がある。
-
[解決済み] Angularjsを使用してローカルストレージにデータを保存するにはどうすればよいですか?
-
[解決済み] 部分テンプレートとテンプレートの複雑なネスト
-
[解決済み] AngularJS:AngularJSがテンプレートをレンダリングした後に、追加のコードを実行するにはどうすればよいですか?
-
[解決済み] Angularでtransclude 'true'とtransclude 'element'を使用するタイミングは?
最新
-
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 実装 サイバーパンク風ボタン
おすすめ
-
angularjs ローカルデータストレージ LocalStorage
-
[解決済み] AngularJs ReferenceError: $http is not defined
-
[解決済み] Angularのui-routerでデフォルトの状態を設定する方法
-
[解決済み] ng-pattern` - 数字だけをチェックする方法は?
-
[解決済み] controllerAs "プロパティを使用する理由は何ですか?
-
[解決済み] どのように$state.goにパラメータを追加しますか?
-
[解決済み] Angular JSによるシンプルなポップアップ
-
[解決済み] angular.serviceとangular.factoryの比較
-
[解決済み] AngularJSのng-repeatでキーと値を反復処理する方法は?
-
[解決済み] ng-modelとng-bindの違いは何ですか?