在指令之间共享数据 [英] Sharing data between directives

问题描述

我有一些名为 foo 的数据，它位于三个孩子的父级范围内:

<bar foo="{{foo}}" baz="{{odp}}"/><mpq foo="{{foo}}" bats="{{maktz}}"/><ktr foo="{{foo}}" otr="{{ompg}}"/>
bar.scope = {foo: '=', baz: '@'};mpq.scope = {foo: '=', bats: '@'};ktr.scope = {foo: '=', otr: '@'};

在这三个指令之间共享 foo 的最佳方式是什么?选项包括:

• 使用一个隔离作用域将 foo 传入 3 次，从而将其复制到四个作用域中
• 让子指令继承父作用域，并在 attrs 上查找 baz、bats 或 otr
• 将 foo 放在 $rootScope 上并将其注入子指令

或者有其他更好的方法吗?

解决方案

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

这是 Plnkr.co 上的一个例子

app.controller('MainCtrl', function($scope, dataService) {$scope.name = '世界';//设置项目.angular.copy([ { name: 'test'} , { name: 'foo' } ], dataService.items);});app.directive('dir1', function(dataService){返回 {限制:'E'，模板:'<h3>指令 1</h3>'+'<div ng-repeat="data.items 中的项目">'+'<input type="text" ng-model="item.name"/>'+'</div>',链接:函数(范围，元素，属性){scope.data = 数据服务；}};});app.directive('dir2', function(dataService){返回 {限制:'E'，模板:'<h3>指令 2</h3>'+'<div ng-repeat="data.items 中的项目">'+'<input type="text" ng-model="item.name"/>'+'</div>',链接:函数(范围，元素，属性){scope.data = 数据服务；}};});app.directive('dir3', function(dataService){返回 {限制:'E'，模板:'<h3>指令 3</h3>'+'<div ng-repeat="data.items 中的项目">'+'<input type="text" ng-model="item.name"/>'+'</div>',链接:函数(范围，元素，属性){scope.data = 数据服务；}};});app.factory('dataService', [function(){退换货品: [] };}]);

HTML

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

I have some data called foo which lives in a scope which is parent to three children:

<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: '@'};

What is the best way to share foo between those three directives? Options include:

• Use an isolated scope to pass in foo three times, thereby duplicating it across four scopes
• Have the child directives inherit the parent scope, and find baz, bats, or otr on attrs
• Put foo on the $rootScope and inject that into the child directives

Or is there another approach that is better?

解决方案

You can create a factory that you can pass to each directive or controller. That will make sure you only have one instance of the array at any given time. EDIT: The only gotcha here is to make sure you're setting reference types and not primitive types on your directive scopes, or you'll end up duplicating the values in each scope.

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', function(dataService){
  return {
    restrict: 'E',
    template: '<h3>Directive 2</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('dir3', function(dataService){
  return {
    restrict: 'E',
    template: '<h3>Directive 3</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.factory('dataService', [function(){
  return { items: [] };
}]);

HTML

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

这篇关于在指令之间共享数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！