当属性下的对象改变并使用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时，为什么引用指令的属性会中断？

回答

相关问题