私はパラメータとしてオブジェクトを取るディレクティブを持っています。このオブジェクトは、親ディレクティブによって別のオブジェクトに変更できます。 $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
ああ、わかりました。私の考えでは、 'vm.obj'は親コントローラからの' $ scope.object'への参照を持っていると考えました(意味: '$ scope.object'が指すもの)。しかし、その場合は、参照は特定のオブジェクトだけに過ぎず、同じままです。私の指示に '$ scope'を使うか、' bindToController'を使うのが良いでしょうか?それとも好みの問題ですか? – Episodex
Btw。プランナーに 'bindToController:true'を追加すると、すべてのdivの初期値が破壊されます。しかし、それを実際のコードで使用すると、感謝しました。 – Episodex
それは好みと一貫性のメーターです。コードベースでcontrollerAsを使用している場合は、そのまま使用してください。コードベースでスコープが使用されている場合は、そのまま使用してください。 –