1

だから私はコントローラーとディレクティブを持っています。コントローラーがディレクティブの後に実行される理由を理解できません。答えを見つけようとしてスタックを精査しましたが、ほとんどの答えはケースバイケースのようです。

最も単純な形の私のコントローラはそうです

app.controller('MyCtrl', ['$scope', function ($scope){
$scope.initAddress = {
    place_id: "",
    geometry: {
        location: {
            A: "",
            F: ""
        }
    },
}
$scope.gotoLocation = function (placeId) {
                   $scope.initAddress = {
                       place_id: "placeId",
                       geometry: {
                           location: {
                               A: placeId.geometry.location.lat(),
                               F: placeId.geometry.location.lng()
                           }
                       }
}};}]);

ng-click ボタンをクリックすると、gotoLocation スコープ関数に移動し、$scope.initAddress を再定義します。私のHTMLは次のとおりです。

<div class="row">
<my-map address="initAddress"></my-map>
</div>
<div ng-repeat="place in placelistData.placeList">
    <button ng-click="gotoLocation(place.id)">{{place.id}}</button>
</div>

ディレクティブを見ると、使用しています

 .directive('myMap', function () {
    return {
        restrict: 'E',
        replace: true,
        scope: {
            address: '=?',
        },
        template: '<div class="dp-places-map-wrapper"><input type="text" class="dp-places-map-input"><div class="dp-places-map-canvas"></div></div>',

        link: function (scope, element, attrs) {
scope.$watch('address', function () {
   if (map && scope.address)
   map.setCenter(getLocation(scope.address));
 });
 }

現在、ボタンをクリックすると、コントローラーと $scopes.initAddress に実行され、$scope.watch にはヒットしません。もう一度クリックすると、最初に $scope.watch にヒットし、次にコントローラーに移動し、それに応じて更新されます。前にコントローラーにヒットし、次に $scope.watch がコントローラーの変更をキャッチするように変更するにはどうすればよいですか。最初に $scope.watch を実行してからコントローラーを実行するのではなく。

助けてくれてありがとう

4

2 に答える 2

3

コントローラーが私のディレクティブの後に実行される理由の理解について。

angular $compile フェーズに従って、ディレクティブは常にコントローラーの前に深さ優先トラバーサル アルゴリズムを使用して呼び出されます。

その理由は、ディレクティブは再利用可能なコンポーネントだからです。そのため、コントローラーが呼び出される前にインスタンス化する必要があります。

たとえば、あなたのhtmlは次のようになります

<body ng-app="demo">
<div ng-controller="controller1">
     <my-map address="initAddress"></my-map>
</div>
<div ng-controller="controller2">
    <my-map address="initAddress"></my-map>   
</div>
<div ng-controller="controller3">
<my-map address="initAddress"></my-map>
 </div></body>

ここで、initAddress は、それぞれのコントローラー「controller1」、「controller2」、および「controller3」のスコープ変数になります。したがって、ディレクティブは常に、深さ優先トラバーサル アルゴリズムを使用してコントローラーの前に呼び出されます。

ディレクティブのライフサイクルは次のとおりです

  1. ディレクティブがインスタンス化される
  2. ディレクティブが宣言されている外部コントローラーが呼び出されます。
  3. ディレクティブ内で定義されたコントローラーが呼び出されます。
  4. 事前リンクが定義されている場合は呼び出されます。
  5. 定義されている場合、ポストリンクは呼び出されます 注 : 定義されている場合、リンク関数は常にポストリンク関数です。コンパイル関数が宣言されている場合、リンク関数は呼び出されません。

詳しくは投稿をご覧ください。 http://yogeshtutorials.blogspot.in/2015/12/angularjs-directive-lifecycle.html

于 2015-12-07T05:54:08.117 に答える