控制器 属性 更改不会影响某些指令的整个绑定 属性
Controller property change doesn't affect the whole bound property on some directive
假设我实现了如下指令:
module.directive("foo", function($scope) {
return {
controllerAs: "model",
controller: function($scope) {
this.items = $scope.items;
this.selectItem = function(item) {
this.selectedItem = item;
};
},
scope: { items: "=" }
};
});
module.directive("bar", function($scope) {
return {
controllerAs: "model",
controller: function() {
this.item = $scope.item;
},
scope: { item: "=" }
};
});
...其中 foo 指令的模板如下所示:
<bar item="model.selectedItem" />
<ol>
<li ng-repeat="item in model.items" ng-click="model.selectItem(item)">
<bar item="item" />
</li>
</ol>
...和 bar
指令的模板看起来像:
<span ng-bind="item.text"></span>
TL;DR:我的问题
当 model.selectedItem
由于用户点击了一些 重复 <bar />
而改变时,外部 <bar />
不知道任何所谓的属性改变。也就是说,外部 <bar />
不会更新其边界 model.text
属性.
我不明白为什么 foo
控制器上的模型更改不会更改外部 bar
指令。
selectedItem
位于 foo
指令范围内。因此,它不会对外部可见(bar
指令)。
您可以保留另一个包含所选项目键的变量。
然后在 bar
指令中,您可以按如下方式绑定值,
<bar item ="items[selectedKey].text"></bar>
编辑:您也可以尝试在范围而不是 this
上设置值。
$scope.selectedItem = item;
而不是
this.selectedItem = item;
假设我实现了如下指令:
module.directive("foo", function($scope) {
return {
controllerAs: "model",
controller: function($scope) {
this.items = $scope.items;
this.selectItem = function(item) {
this.selectedItem = item;
};
},
scope: { items: "=" }
};
});
module.directive("bar", function($scope) {
return {
controllerAs: "model",
controller: function() {
this.item = $scope.item;
},
scope: { item: "=" }
};
});
...其中 foo 指令的模板如下所示:
<bar item="model.selectedItem" />
<ol>
<li ng-repeat="item in model.items" ng-click="model.selectItem(item)">
<bar item="item" />
</li>
</ol>
...和 bar
指令的模板看起来像:
<span ng-bind="item.text"></span>
TL;DR:我的问题
当 model.selectedItem
由于用户点击了一些 重复 <bar />
而改变时,外部 <bar />
不知道任何所谓的属性改变。也就是说,外部 <bar />
不会更新其边界 model.text
属性.
我不明白为什么 foo
控制器上的模型更改不会更改外部 bar
指令。
selectedItem
位于 foo
指令范围内。因此,它不会对外部可见(bar
指令)。
您可以保留另一个包含所选项目键的变量。
然后在 bar
指令中,您可以按如下方式绑定值,
<bar item ="items[selectedKey].text"></bar>
编辑:您也可以尝试在范围而不是 this
上设置值。
$scope.selectedItem = item;
而不是
this.selectedItem = item;