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（）。JSONデータをdataTable（）呼び出しに渡してテーブルデータを提供できます。または、データをページ上に既に持っていて、残りの処理を実行できます。私は後者を行っており、行は既にHTMLページ上にあります。

しかし問題は、DOMの準備が整った後でtable＃line_itemsのdataTable（）を呼び出さなければならないことです。上記のディレクティブは、テンプレートがディレクティブの要素に追加される前にdataTable（）メソッドを呼び出します。追加後に関数を呼び出す方法はありますか？

ご協力ありがとうございました！

アンディの答えの後の更新1：

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データテーブル呼び出しを試します

.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
});

私は同じ問題を抱えていましたが、答えは本当にノーだと思います。Miškoのコメントとグループでの議論を参照してください。

Angularは、DOMを操作するために行うすべての関数呼び出しが完了したことを追跡できますが、これらの関数は非同期ロジックをトリガーし、戻り後もDOMを更新し続ける可能性があるため、Angularはそれについて知ることができませんでした。Angularが与えるコールバックは時々機能するかもしれませんが、信頼するのは安全ではありません。

私たちは、あなたがしたように、setTimeoutを使ってこれを発見的に解決しました。

（誰もが私に同意するわけではないことに注意してください-上記のリンクのコメントを読んで、あなたの考えを見てください。）

テンプレートを配置した後に実行されるpostLinkとも呼ばれる「リンク」関数を使用できます。

app.directive('myDirective', function() {
  return {
    link: function(scope, elm, attrs) { /*I run after template is put in */ },
    template: '<b>Hello</b>'
  }
});

ディレクティブを作成する予定がある場合は、こちらをお読みください。http：//docs.angularjs.org/guide/directive

私の答えはデータテーブルとは関係ありませんが、それはDOM操作の問題に対処します。たとえば、内容が非同期で更新される要素で使用されるディレクティブのjQueryプラグインの初期化です。

タイムアウトを実装する代わりに、コンテンツの変更（または追加の外部トリガー）をリッスンするウォッチを追加することもできます。

私の場合、ng-repeatが実行されて内部DOMが作成されたら、jQueryプラグインを初期化するためにこの回避策を使用しました。ここに私がやった方法があります...

HTML：

<div my-directive my-directive-watch="!!myContent">{{myContent}}</div>

JS：

app.directive('myDirective', [ function(){
    return {
        restrict : 'A',
        scope : {
            myDirectiveWatch : '='
        },
        compile : function(){
            return {
                post : function(scope, element, attributes){

                    scope.$watch('myDirectiveWatch', function(newVal, oldVal){
                        if (newVal !== oldVal) {
                            // Do stuff ...
                        }
                    });

                }
            }
        }
    }
}]);

注： my-directive-watch属性でmyContent変数をboolにキャストする代わりに、そこで任意の式を想像できます。

注：上記の例のようにスコープを分離することは、要素ごとに1回しか実行できません。同じ要素で複数のディレクティブを使用してこれを実行しようとすると、$ compile：multidirエラーが発生します-参照：https : //docs.angularjs.org / error / $ compile / multidir

この質問に答えるのが遅いかもしれません。しかし、それでも誰かが私の答えから利益を得るかもしれません。

同様の問題があり、私の場合、ディレクティブは変更できません。それはライブラリであり、ライブラリのコードを変更することはお勧めできません。したがって、私が行ったのは、変数を使用してページの読み込みを待機し、html内でng-ifを使用して特定の要素のレンダリングを待機することでした。

私のコントローラーでは：

$scope.render=false;

//this will fire after load the the page

angular.element(document).ready(function() {
    $scope.render=true;
});

私のhtml（私の場合、htmlコンポーネントはキャンバスです）

<canvas ng-if="render"> </canvas>

同じ問題がありましたが、Angular + DataTable fnDrawCallback+ 行グループ + $ compiledネストされたディレクティブを使用しています。$ timeoutをfnDrawCallback関数に配置して、ページ分割のレンダリングを修正しました。

例の前に、row_groupingソースに基づいて：

var myDrawCallback = function myDrawCallbackFn(oSettings){
  var nTrs = $('table#result>tbody>tr');
  for(var i=0; i<nTrs.length; i++){
     //1. group rows per row_grouping example
     //2. $compile html templates to hook datatable into Angular lifecycle
  }
}

例の後：

var myDrawCallback = function myDrawCallbackFn(oSettings){
  var nTrs = $('table#result>tbody>tr');
  $timeout(function requiredRenderTimeoutDelay(){
    for(var i=0; i<nTrs.length; i++){
       //1. group rows per row_grouping example
       //2. $compile html templates to hook datatable into Angular lifecycle
    }
  ,50); //end $timeout
}

短いタイムアウト遅延でさえ、Angularがコンパイル済みのAngularディレクティブをレンダリングできるようにするのに十分でした。

私のために働いた解決策はどれも、タイムアウトの使用を受け入れません。これは、postLink中に動的に作成されたテンプレートを使用していたためです。

ただし、タイムアウトにより「0」のタイムアウトが発生する可能性があることに注意してください。タイムアウトにより、ブラウザのキューに呼び出される関数が追加されます。これは、角度レンダリングエンジンが既にキューにあるため、これが発生した後に発生します。

これを参照してください：http : //blog.brunoscopelliti.com/run-a-directive-after-the-dom-has-finished-rendering

これは、浅いレンダリングの後にアクションをプログラムするためのディレクティブです。浅いとは、要素そのものがレンダリングされた後に評価され、そのコンテンツがいつレンダリングされるかとは無関係であることを意味します。したがって、レンダリング後のアクションを実行するサブ要素が必要な場合は、そこで使用することを検討する必要があります。

define(['angular'], function (angular) {
  'use strict';
  return angular.module('app.common.after-render', [])
    .directive('afterRender', [ '$timeout', function($timeout) {
    var def = {
        restrict : 'A', 
        terminal : true,
        transclude : false,
        link : function(scope, element, attrs) {
            if (attrs) { scope.$eval(attrs.afterRender) }
            scope.$emit('onAfterRender')
        }
    };
    return def;
    }]);
});

その後、あなたは行うことができます：

<div after-render></div>

または次のような便利な式を使用します：

<div after-render="$emit='onAfterThisConcreteThingRendered'"></div>

私はこれを次のディレクティブで動作させました：

app.directive('datatableSetup', function () {
    return { link: function (scope, elm, attrs) { elm.dataTable(); } }
});

そしてHTMLでは：

<table class="table table-hover dataTable dataTable-columnfilter " datatable-setup="">

上記の方法で問題が解決しない場合は、トラブルシューティングを行ってください。

1）「datatableSetup」は「datatable-setup」と同等であることに注意してください。Angularは形式をキャメルケースに変更します。

2）アプリがディレクティブの前に定義されていることを確認します。たとえば、単純なアプリの定義とディレクティブ。

var app = angular.module('app', []);
app.directive('datatableSetup', function () {
    return { link: function (scope, elm, attrs) { elm.dataTable(); } }
});

ロード順序が予想できないという事実に続いて、簡単なソリューションを使用できます。

ディレクティブと「ディレクティブのユーザー」の関係を見てみましょう。通常、ディレクティブのユーザーは、データをディレクティブに提供するか、ディレクティブが提供する機能（関数）を使用します。一方、ディレクティブは、そのスコープで定義されるいくつかの変数を想定しています。

すべてのプレーヤーがそれらのアクションを実行する前に、すべてのアクション要件が満たされていることを確認できれば、すべてが順調であるはずです。

そして今指令：

app.directive('aDirective', function () {
    return {
        scope: {
            input: '=',
            control: '='
        },
        link: function (scope, element) {
            function functionThatNeedsInput(){
                //use scope.input here
            }
            if ( scope.input){ //We already have input 
                functionThatNeedsInput();
            } else {
                scope.control.init = functionThatNeedsInput;
            }
          }

        };
})

そして今ディレクティブhtmlのユーザー

<a-directive control="control" input="input"></a-directive>

ディレクティブを使用するコンポーネントのコントローラーのどこかに：

$scope.control = {};
...
$scope.input = 'some data could be async';
if ( $scope.control.functionThatNeedsInput){
    $scope.control.functionThatNeedsInput();
}

それだけです。オーバーヘッドはたくさんありますが、$ timeoutを失う可能性があります。また、ディレクティブがインスタンス化されるときに存在する制御変数に依存しているため、ディレクティブを使用するコンポーネントはディレクティブの前にインスタンス化されると想定しています。