问题描述
我定义了三个指令:
家长
这应该在其他两个指令之间共享变量 - 儿童一和儿童二.
儿童一号
这包含一个表示搜索词的输入字段.每当这种变化时,我都会使用链接函数来更新存储在父控制器中的变量.
在实际使用中,我将根据这个词进行搜索并更新数组.但在这个例子中,为了简单起见,我只想创建一个长度为 1 的新数组,我想用它的值填充搜索词.
二孩
这应该显示结果数组.
出于某种原因,这不起作用,如果我将数组的长度设置为 0 并推送值,我将看到子二中的视图更新(我已注释掉实现此目的的代码),但我想了解为什么设置数组值不起作用.
我知道一个服务适合这里,但是这个指令可能会在同一页面上多次重复使用,所以我不希望页面上的每个项目之间的范围发生冲突.
为什么视图没有使用我当前使用的代码进行更新?
var app = angular.module('示例应用程序', []).directive('parent', function() {返回 {限制:'E',转置:真实,模板:<div ng-transclude></div>",控制器:功能($范围){this.searchTerm = "";this.arrayContainingSearchTerm = [{value: ''}];this.updateSearchTerm = 函数(searchTerm){this.searchTerm = searchTerm;//当这个数组被分配时 - 它不会在视图中更新this.arrayContainingSearchTerm = [{value: searchTerm}];//这将更新视图.//this.arrayContainingSearchTerm.length = 0;//this.arrayContainingSearchTerm.push([{value: searchTerm}]);};}}}).directive('childOne', function() {返回 {限制:'E',要求:'^^父母',模板:<div><h1>孩子一</h1><input ng-model='searchTerm'></input></div>",链接:函数(范围、元素、属性、父控制器){scope.$watch('searchTerm', function(newValue, oldValue) {parentController.updateSearchTerm(newValue);});}}}).directive('childTwo', function() {返回 {限制:'E',要求:'^^父母',模板:<div><h1>子二</h1><h2>下面的值应该是:{{searchTerm}}</h2><h2>{{arrayContainingSearchTerm}}</h2>
",链接:函数(范围、元素、属性、父控制器){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="示例应用程序"><一个孩子></一个孩子><child-two></child-two></父母>