コントローラ内のディレクティブ値を読み取ることができません

Question

grid-urlディレクティブからURLパラメータを読み取れるテーブルを実装しようとしています。その後、これはコントローラー内の$httpに供給されます。 しかし、期待どおりに動作していないようです。値は常に定義されていません。ここで

がマークアップだ：

<table class="table table-striped" grid-url="http://localhost/records/all"> 
    ... 
</table> 

ここでは、関連する初期の抜粋です：

app.directive('gridUrl', function(){ 
    return { 
     replace: true, 
     link: function(scope, element, attrs){ 
      // Add the gridUrl property to the scope 
      scope.gridUrl = attrs.gridUrl; 
     } 
    } 
}); 

app.controller('Ctrl', function($scope){ 
    // Expect to get http://localhost/records/all, but get undefined instead 
    console.log($scope.gridUrl); 
}); 

それはスコープの分離に問題だったかのように見えません。コントローラー自体にconsole.log($scope)を呼び出すと、最も奇妙なことは、$scope.gridUrlにはhttp://localhost/records/allがあることがわかります。

したがって、コントローラーでプロパティーgridUrlが未定義になる原因は何ですか？

Answer 1

は、それを可能にする方法を見つけました。ここでのトリックは、$timeoutサービスを10ミリ秒で使用することです。

app.controller('Ctrl', function($scope, $timeout){ 
    $timeout(function(){ 
    // Getting http://localhost/records/all as expected 
    console.log($scope.gridUrl); 
    }, 10); 

}); 

Answer 2

あなたは、モジュール間でデータを共有するためのサービスを使用することができます：それは最初のコントローラを定義している

app.factory('SharedService', function() { 
     return { 
     sharedObject: { 
      value: '' 
     } 
     }; 
    });` 

Answer 3

。したがって、範囲内には、プロパティgridUrlはありません。共有サービスを使用して、指示文をコントローラーに注入する必要があります。

Answer 4

これは、コントローラーが最初に呼び出されてから、その指示がコンパイルされているためです。したがって、gridUriの値はスコープ内にありますが、コントローラが呼び出された後は数サイクルです。

<table class="table table-striped" grid-url="http://localhost/records/all"> 
    test :: {{ gridUrl }} 
</table> 

これは、コンソールにログインした後$スコープならびに財産を見せつけるます：あなたは、テンプレートで出力この変数をできることを証明するために

。 （それがオブジェクトのときにコンソールで更新されます）

変数を必要とするかどうかに応じて、ウォッチを入れてスコープに表示されたときにトリガーするか、またはその方法を再設計できますデータを提供します（たとえば、共有UIモデルサービスを追加するなど）。

Answer 5

次に、あなたの指示でそれをバインドし、コントローラにgridUrlを定義する必要があります。同じ構造を維持しながら

<div ng-controller="Ctrl" ng-init="$scope.gridUrlAttr = 'http://localhost/records/all'"> 
    <table class="table table-striped" grid-url-attr="$scope.gridUrlAttr"> 
     ... 
    </table> 
</div> 

app.directive('gridUrl', function(){ 
    return { 
     replace: true, 
     scope: { 
      gridUrlAttr: "=" 
     }, 
     link: function(scope, element, attrs){ 
      // Add the gridUrl property to the scope 
      console.log(scope.gridUrlAttr); 
      // here you can change the gridUrlAttr value 
     } 
    } 
}); 

app.controller('Ctrl', function($scope){ 
    // Expect to get http://localhost/records/all, but get undefined instead 
    console.log($scope.gridUrlAttr); 
});