AngularJs:为什么异步数据到达时我的指令中的范围不会更新？

Question

我有一个带有隔离范围的指令,它通过引用获取范围变量

angular.module('myApp')
    .directive('myDirective', function() {
        return {
            scope: {
                items: '='
            },
            templateUrl: 'template.html',
            replace: true,
            controller: 'myDirectiveCtrl',
            controllerAs: 'ctrl'
        };
    })
    .controller('myDirectiveCtrl', function($scope) {
        this.items = $scope.items;
    });

传递方式如下:

    <div my-directive items='items'></div>

在外部控制器中,数据被异步加载,并且传递给指令的范围项更新:

angular.module('myApp', [])
  .controller('myCtrl', function($scope) {

    $scope.setItems = function() {
      $scope.items = [
        'Here',
        'There',
        'Everywhere'
      ];
    };
  });

加载数据时,我的指令范围之外的范围会更新,但内部则不会

我的HTML:

      <div my-directive items='items'></div> <!-- this doesn't update --> 

      Outside directive
      <ul ng-repeat='i in items'>            <!-- this does update -->
        <li>{{i}}</lu>
      </ul>

      <button ng-click="setItems()">Set items</button>

如何在我的指令中更新我的范围？我

这里的人物

Answer 1

当Angular首次运行你的指令的控制器功能时,你的$scope.items === undefined,所以当你这样做时this.items = $scope.items,你this.items === undefined也是.

而已.之后,没有任何改变this.items.

这与此不同$scope.items.$scope.items与外部作用域双向绑定,因此只要Angular在外部检测到更改,它就会设置隔离的作用域变量.

最简单的方法(在我看来最合适)是$scope直接在指令中使用属性:

<div>
    Inside directive
    <ul ng-repeat="i in items">
      <li>{{ i }}</li>
    </ul>
</div>

如果你想将你的控制器用作ViewModel而不是范围(我不知道为什么你会这样做),你可以这样做:

$scope.$watchCollection("items", function(newVal, oldVal) {
   ctrl.items = newVal;
});

编辑:

在Angular 1.3中,您也可以bindToController: true在指令的定义中执行,以便控制器属性" items"将获得获得的双向绑定$scope.items.然后,你甚至不需要这样做this.items = $scope.items;:

你的叉子说明了.