2016-07-05 5 views
0

私はパラメータとしてオブジェクトを取るディレクティブを持っています。このオブジェクトは、親ディレクティブによって別のオブジェクトに変更できます。 $scopeを使用すると、ディレクティブでオブジェクトが更新されます。 ControllerAs構文を使用すると、参照が破損し、変更が反映されません。私は、両方のケースで$scope.objvm.objが参照のため、同じ方法で動作するはずだと仮定しました。ここでの参照を壊しているのはなぜですか?属性のオブジェクトが変更され、ControllerAsが使用されているときにディレクティブの属性への参照が壊れていますか?

<body ng-app="app" ng-controller="ctrl"> 
    <div>Original object: {{object}}</div> 
    <button ng-click="changeObject()">Change object!</button> 
    <my-object obj="object"></my-object> 
    <my-object-vm obj="object"></my-object-vm> 

    <script type="text/javascript"> 
     var app = angular.module("app", []); 

     app.controller("ctrl", function($scope) { 
     $scope.object = { 
      p1: "A" 
     }; 

     $scope.changeObject = function() { 
      $scope.object = { 
      p2: "B" 
      } 
     } 
     }); 

     app.directive("myObject", function() { 
     return { 
      template: "<div>Obj from scope: {{obj}}</div>", 
      scope: { 
      obj: "=" 
      } 
     } 
     }); 

     app.directive("myObjectVm", function() { 
     return { 
      template: "<div>Obj from vm: {{vm.obj}}</div>", 
      scope: { 
      obj: "=" 
      }, 
      controller: function($scope) { 
      var vm = this; 
      vm.obj = $scope.obj; 
      }, 
      controllerAs: "vm" 
     } 
     }); 
    </script> 
</body> 

Plunker: working example

答えて

0

link()が呼び出されたときに、一度だけのスコープからコントローラへの参照をコピーしているので、リンクが壊れています。したがって、後で新しい値が$scope.objに割り当てられると、コントローラは引き続き古い値を参照します。

あなたはcontrollerAsに加えbindToColtrollerを使用する必要がある:単離範囲を指示するために使用される場合bindToController: trueコンポーネントがコントローラに結合し、その特性を有することを可能にする(上記参照)

ではなく、範囲に入れる

+0

ああ、わかりました。私の考えでは、 'vm.obj'は親コントローラからの' $ scope.object'への参照を持っていると考えました(意味: '$ scope.object'が指すもの)。しかし、その場合は、参照は特定のオブジェクトだけに過ぎず、同じままです。私の指示に '$ scope'を使うか、' bindToController'を使うのが良いでしょうか?それとも好みの問題ですか? – Episodex

+0

Btw。プランナーに 'bindToController:true'を追加すると、すべてのdivの初期値が破壊されます。しかし、それを実際のコードで使用すると、感謝しました。 – Episodex

+0

それは好みと一貫性のメーターです。コードベースでcontrollerAsを使用している場合は、そのまま使用してください。コードベースでスコープが使用されている場合は、そのまま使用してください。 –

関連する問題