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

发布时间：2020-12-17 07:23:53 所属栏目：安全来源：网络整理

导读：我有一个带隔离范围的指令,它通过引用获取范围变量 angular.module('myApp') .directive('myDirective',function() { return { scope: { items: '=' },templateUrl: 'template.html',replace: true,controller: 'myDirectiveCtrl',controllerAs: 'ctrl' }; }

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

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>

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

Plunker here

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

而已.在那之后,没有什么可以改变这个.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获得的双向绑定.然后,你甚至不需要这样做.items = $scope.items;：

你的forked plunker来说明.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!