angularjs – 在指令之间共享数据

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

导读：我有一些名为foo的数据，它存在于三个孩子的父母的范围内： div ng-init="foo=[1,2,3]" bar foo="{{foo}}" baz="{{odp}}" / mpq foo="{{foo}}" bats="{{maktz}}" / ktr foo="{{foo}}" otr="{{ompg}}" //divbar.scope = {foo: '=',baz: '@'};mpq.scope = {foo

我有一些名为foo的数据，它存在于三个孩子的父母的范围内：

<div ng-init="foo=[1,2,3]">
    <bar foo="{{foo}}" baz="{{odp}}" />
    <mpq foo="{{foo}}" bats="{{maktz}}" />
    <ktr foo="{{foo}}" otr="{{ompg}}" />
</div>

bar.scope = {foo: '=',baz: '@'};
mpq.scope = {foo: '=',bats: '@'};
ktr.scope = {foo: '=',otr: '@'};

在这三个指令之间分享foo的最佳方式是什么？选项包括：

>使用隔离镜头将foo传入三次，从而将其复制到四个镜像上
>让子代码继承父范围，并在attrs上找到baz，bats或otr
>将foo放在$ rootScope上，并注入到子指令中

还是有更好的方法呢？

您可以创建一个可以传递给每个指令或控制器的工厂。这将确保您在任何给定的时间只有一个数组实例。编辑：这里唯一的办法是确保您在指令范围上设置引用类型而不是原始类型，否则最终将复制每个范围中的值。

Here is an example on Plnkr.co

app.controller('MainCtrl',function($scope,dataService) {
  $scope.name = 'World';
  //set up the items.
  angular.copy([ { name: 'test'},{ name: 'foo' } ],dataService.items);
});

app.directive('dir1',function(dataService){
  return {
    restrict: 'E',template: '<h3>Directive 1</h3>' + 
    '<div ng-repeat="item in data.items">' + 
      '<input type="text" ng-model="item.name"/>' + 
    '</div>',link: function(scope,elem,attr) {
      scope.data = dataService;
    }
  };
});

app.directive('dir2',template: '<h3>Directive 2</h3>' + 
    '<div ng-repeat="item in data.items">' + 
      '<input type="text" ng-model="item.name"/>' + 
    '</div>',attr) {
      scope.data = dataService;
    }
  };
});

app.directive('dir3',template: '<h3>Directive 3</h3>' + 
    '<div ng-repeat="item in data.items">' + 
      '<input type="text" ng-model="item.name"/>' + 
    '</div>',attr) {
      scope.data = dataService;
    }
  };
});

app.factory('dataService',[function(){
  return { items: [] };
}]);

HTML

<dir1></dir1>
  <dir2></dir2>
  <dir3></dir3>

（编辑：李大同）

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