儿童指令之间共享数据

Question

我已经定义了三个指令：

• 家长

  这应该在其他两个指令之间共享变量 - 儿童一台和儿童两个。

• 儿童一台

  这包含表示搜索项的输入字段。每当这种变化，我使用链接功能来更新存储在父控制器中的变量。

  在现实世界中，我将根据这个术语进行搜索并更新数组。但为了简化这个例子，我只想创建一个长度为1的新数组，我想用搜索词填充它作为值。

• 儿童两个

  这将显示所得到的数组。

出于某种原因，这是行不通的，如果我设置数组的长度为0，并推动价值，我必须看到在儿童两个视图更新（我注释掉实现此代码）但我想了解为什么设置数组值不起作用。

我明白，一个服务将是适合这里，但这个指令可以重新使用在同一页面上多次，所以我不想范围页面上每个项目的比赛。

为什么视图没有被当前使用的代码更新？

var app = angular 
 
    .module('SampleApplication', []) 
 
    .directive('parent', function() { 
 
    return { 
 
     restrict: 'E', 
 
     transclude: true, 
 
     template: "<div ng-transclude></div>", 
 
     controller: function($scope) { 
 
     this.searchTerm = ""; 
 
     this.arrayContainingSearchTerm = [{value: ''}]; 
 
     
 
     this.updateSearchTerm = function(searchTerm) { 
 
      this.searchTerm = searchTerm; 
 
      
 
      //When this array is assigned - it doesn't get updated in the view 
 
      this.arrayContainingSearchTerm = [{value: searchTerm}]; 
 
      
 
      //This will update the view. 
 
      //this.arrayContainingSearchTerm.length = 0; 
 
      //this.arrayContainingSearchTerm.push([{value: searchTerm}]); 
 
     }; 
 
     
 
     } 
 
    } 
 
    }) 
 
    .directive('childOne', function() { 
 
    return { 
 
     restrict: 'E', 
 
     require: '^^parent', 
 
     template: "<div><h1>Child One</h1><input ng-model='searchTerm'></input></div>", 
 
     link: function(scope, element, attrs, parentController) { 
 
     scope.$watch('searchTerm', function(newValue, oldValue) { 
 
      parentController.updateSearchTerm(newValue); 
 
     }); 
 
     } 
 
    } 
 
    }) 
 
    .directive('childTwo', function() { 
 
    return { 
 
     restrict: 'E', 
 
     require: '^^parent', 
 
     template: "<div><h1>Child Two</h1><h2>Value below should be: {{searchTerm}}</h2><h2>{{arrayContainingSearchTerm}}</h2></div>", 
 
     link: function(scope, element, attrs, parentController) { 
 
     scope.searchTerm = parentController.searchTerm; 
 
     scope.arrayContainingSearchTerm = parentController.arrayContainingSearchTerm; 
 
     } 
 
    } 
 
    })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script> 
 

 

 
<div ng-app="SampleApplication"> 
 
    <parent> 
 
    <child-one></child-one> 
 
    <child-two></child-two> 
 
    </parent> 
 
</div>

Answer 1

儿童范围自动继承父母的范围和可以指定通过$ parent /需要父控制器访问父母的范围，但要注意，兄弟姐妹不能[轻松]访问其他范围。因此，解决方案是更新父范围并将父范围更改反映回目标孩子。

你并不需要更新子范围，因为孩子范围自动从父范围继承。而不是看searchTerm ngModel，只需在childOne指令中使用attrs.ngModel即可。

var app = angular 
 
.module('SampleApplication', []) 
 
.directive('parent', function() { 
 
    return { 
 
    restrict: 'E', 
 
    transclude: true, 
 
    template: "<div ng-transclude></div>", 
 
    controller: function($scope) { 
 
     this.searchTerm = ""; 
 
     this.arrayContainingSearchTerm = [{value: ''}]; 
 

 
     this.updateSearchTerm = function(searchTerm) { 
 
     this.searchTerm = searchTerm; 
 

 
     //When this array is assigned - it doesn't get updated in the view 
 
     this.arrayContainingSearchTerm = [{value: searchTerm}]; 
 

 
     //This will update the view. 
 
     //this.arrayContainingSearchTerm.length = 0; 
 
     //this.arrayContainingSearchTerm.push([{value: searchTerm}]); 
 
     }; 
 

 
    } 
 
    } 
 
}) 
 
.directive('childOne', function() { 
 
    return { 
 
    restrict: 'E', 
 
    require: '^^parent', 
 
    template: "<div><h1>Child One</h1><input ng-model='searchTerm'></input></div>", 
 
    link: function(scope, element, attrs, parentController) { 
 
     // Just use attrs.ngModel 
 
     parentController.updateSearchTerm(attrs.ngModel); 
 
    } 
 
    } 
 
}) 
 
.directive('childTwo', function() { 
 
    return { 
 
    restrict: 'E', 
 
    require: '^^parent', 
 
    template: "<div><h1>Child Two</h1><h2>Value below should be: {{searchTerm}}</h2><h2>{{arrayContainingSearchTerm}}</h2></div>", 
 
    link: function(scope, element, attrs, parentController) { 
 
     // Comment/remove this since the scope is automatically inherit from parent scope 
 
     //scope.arrayContainingSearchTerm = parentController.arrayContainingSearchTerm; 
 
     //scope.searchTerm = parentController.searchTerm; 
 
     // scope.arrayContainingSearchTerm = parentController.arrayContainingSearchTerm; 
 

 
    } 
 
    } 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script> 
 

 

 
<div ng-app="SampleApplication"> 
 
    <parent> 
 
    <child-one></child-one> 
 
    <child-two></child-two> 
 
    </parent> 
 
</div>

Answer 2

你的第二个指令是不知道你正在做之后的变化 - 你需要$watch他们：

var app = angular 
 
.module('SampleApplication', []) 
 
.directive('parent', function() { 
 
    return { 
 
    restrict: 'E', 
 
    transclude: true, 
 
    template: "<div ng-transclude></div>", 
 
    controller: function($scope) { 
 
     this.searchTerm = ""; 
 
     this.arrayContainingSearchTerm = [{value: ''}]; 
 

 
     this.updateSearchTerm = function(searchTerm) { 
 
     this.searchTerm = searchTerm; 
 

 
     //When this array is assigned - it doesn't get updated in the view 
 
     this.arrayContainingSearchTerm = [{value: searchTerm}]; 
 

 
     //This will update the view. 
 
     //this.arrayContainingSearchTerm.length = 0; 
 
     //this.arrayContainingSearchTerm.push([{value: searchTerm}]); 
 
     }; 
 

 
    } 
 
    } 
 
}) 
 
.directive('childOne', function() { 
 
    return { 
 
    restrict: 'E', 
 
    require: '^^parent', 
 
    template: "<div><h1>Child One</h1><input ng-model='searchTerm'></input></div>", 
 
    link: function(scope, element, attrs, parentController) { 
 
     scope.$watch('searchTerm', function(newValue, oldValue) { 
 
     parentController.updateSearchTerm(newValue); 
 
     }); 
 
    } 
 
    } 
 
}) 
 
.directive('childTwo', function() { 
 
    return { 
 
    restrict: 'E', 
 
    require: '^^parent', 
 
    template: "<div><h1>Child Two</h1><h2>Value below should be: {{searchTerm}}</h2><h2>{{arrayContainingSearchTerm}}</h2></div>", 
 
    link: function(scope, element, attrs, parentController) { 
 
     scope.arrayContainingSearchTerm = parentController.arrayContainingSearchTerm; 
 
     scope.searchTerm = parentController.searchTerm; 
 
     scope.$watch(function() { 
 
     scope.arrayContainingSearchTerm = parentController.arrayContainingSearchTerm; 
 
     }); 
 

 
    } 
 
    } 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script> 
 

 

 
<div ng-app="SampleApplication"> 
 
    <parent> 
 
    <child-one></child-one> 
 
    <child-two></child-two> 
 
    </parent> 
 
</div>