javascript - Controller 属性更改不会影响某些指令的整个绑定(bind)属性

Question

假设我已经实现了如下指令:

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 />不知道任何所谓的属性(property)变更。即外层<bar />不会更新其绑定(bind) model.text属性。

我不明白为什么 foo 上的模型会发生变化的 Controller 不会改变外部bar指令。

Answer 1

selectedItem 位于 foo 指令范围内。因此，它对外部不可见(bar 指令)。

您可以保留另一个包含所选项目的键的变量。然后在 bar 指令中，您可以按如下方式绑定(bind)值，

<bar item ="items[selectedKey].text"></bar>

编辑:您还可以尝试在范围而不是this上设置值。

$scope.selectedItem = item;

而不是

this.selectedItem = item;