我已经定义了三个指令:儿童指令之间共享数据
家长
这应该在其他两个指令之间共享变量 - 儿童一台和儿童两个。
儿童一台
这包含表示搜索项的输入字段。每当这种变化,我使用链接功能来更新存储在父控制器中的变量。
在现实世界中,我将根据这个术语进行搜索并更新数组。但为了简化这个例子,我只想创建一个长度为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>
谢谢你的回答。 我无法使用parentController。$ scope语法来访问父控制器的作用域。 另外,你的意思是分配变量到自己的链接功能? 您能提供一个答案片段吗? –
嗨,我已经更新了我的答案。检查出 – digit
谢谢你的回答。我不能在Transclusion中使用这个答案,因为父范围会丢失,但在我的情况下,跨越不重要。我重写了我的指令,让孩子一和孩子二硬编码,并且指令彼此沟通没有任何问题。 –