當屬性下的對象改變並使用ControllerAs時，爲什麼引用指令的屬性會中斷？

我有一個指令，它將一個對象作爲參數。該對象可以通過父指令更改爲另一個對象。當我使用$scope時，對象在指令中更新。當我使用ControllerAs語法時，參考被打破，變化不被反映。我認爲在這兩種情況下，$scope.obj和vm.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

來源

2016-07-05 Episodex

因爲您複製範圍的參考控制器只有一次的聯繫被打破，當link()被調用。所以後來，當一個新值被分配給$scope.obj時，控制器仍然指向舊的。

需要除了使用bindToColtroller到controllerAs：

當分離物範圍被用於指令（見上文），bindToController: true將允許組件有其屬性綁定到控制器，而不是範圍。

來源

2016-07-05 13:00:28

啊，我明白了。在我看來，我認爲'vm.obj'引用了來自父控制器的'$ scope.object'（意思是：無論$ scope.object指向什麼地方）。但是，情況是，參考僅針對特定對象，並且保持不變。什麼是更好的做法：在我的指令中使用'$ scope'還是使用'bindToController'？或者這是一個偏好問題？ – Episodex

順便說一句。向plunker添加'bindToController：true'會打破所有div的初始值。但在實際代碼中使用它，謝謝。 – Episodex

這是一個偏好和連貫性的變化。如果您的代碼庫使用了控制器A，請繼續使用它。如果您的代碼庫使用範圍，請繼續使用它。 –

當屬性下的對象改變並使用ControllerAs時，爲什麼引用指令的屬性會中斷？

回答

相關問題