从子指令的父指令 [angularJS] 触发子指令中的函数
Trigger a function in a child directive from it's parent [angularJS]
所以在子指令中使用指令属性require: '^ParentCtrl'
时,我总是反向执行此操作。 使用 require 然后调用父函数;但是,我需要反向执行此操作。
问题:
如何触发 FROM 父指令执行子指令中的函数。
注意:1.子指令在link:
内没有功能2.本质上我想要一个反向要求。
家长指令:
'use strict';
angular.module('carouselApp')
.directive('waCarousel', function() {
return {
templateUrl: 'views/carousel/wa.carousel.html',
controller: function($scope) {
var self = this;
// this function is being called based on how many pages there are
self.carouselElLoaded = function(result) {
var count = 1;
Carousel.params.pageRenderedLength += count;
//when all the pages are loaded
if (Carousel.params.pageRenderedLength === Carousel.params.pageLength) {
Carousel.params.carouselReady = true;
// !!!!!!!! Trigger will go here!!!!!!!!!//
ChildCtrl.drawHotspots(); // (**for placement only**)
} else {
Carousel.params.carouselReady = false;
}
};
}
}
})
儿童指令:
'use strict';
angular.module('carouselApp')
.directive('waHotspots', function() {
return {
require: '^waCarousel',
link: function (scope, element, attrs, ctrl) {
//call this directive based on how
scope.drawHotspots = function () {...};
}
})
这可以通过让父控制器通过您创建的明确定义的 API 与子控制器通信来实现。 这个想法是,您希望通过让每个各自的控制器尽可能少地了解彼此,但仍有足够的知识来完成工作,从而保持父指令和子指令之间的松散耦合。
为此,需要子指令中的父指令,并让子指令向父指令的控制器注册自身:
子指令:
require: '^parentDirective',
controller: function(){
this.someFunc = function() {...}
},
link: function(scope,element,attr, parentCtrl){
parentCtrl.register(element);
}
然后在父指令中,实现寄存器函数,并获取子项的控制器,并在需要时调用子项的函数:
父指令:
controller: function(){
var childCtrl = undefined;
this.register = function (element) {
childCtrl = element.controller();
}
this.callChildFunc = function (){
childCtrl.someFunc();
}
},
link: function (scope,element){
var ctrl = element.controller();
ctrl.callChildFunc();
}
您可以随时通过$watch触发它。只需传入要监视的父范围值并更改其值。
父母:
$scope.drawHotspots = false;
模板:
waHotspots the-trigger="drawHotspots"....
儿童指令:
localTrigger: '@' // Receive the value to watch
scope.$watch('localTrigger',function() {
// call drawHotspots if value is set to true
});
这是老话题,但我今天来这里,其他人也可能......
我认为最好的办法是使用Service
angular.module('App').service('SomeService', [SomeService]);
然后将服务注入父级和子级...
controller : ['$rootScope', '$scope','SomeService', SomeDirectiveController],
使用该服务相互交谈...
在他们的控制器中SomeService.setParent(this)
和SomeService.setChild(this)
服务将有一个字段来保存引用:
this.parentCtrl = null;
this.childCtrl = null;//or [] in-case you have multiple childs!
在父级的某个地方:SomeService.childCtrl.someFunctionInChild()
或者,如果您想要限制访问,请在服务中将字段设为私有:
var parentCtrl = null;
var childCtrl = null;//or [] in-case you have multiple childs of the same type!
this.callUserFunc = function(param){childCtrl.someFunctionInChild(param)};
在父级的某个地方:SomeService.callUserFunc(myparam)
- 从html创建一个指令,该指令按类名应用函数
- AngularJS指令单元测试中未定义的函数
- AngularJS指令部分应用的函数don'不起作用
- 角度指令's链接函数未被调用
- 从子指令调用指令函数不起作用
- 参数未在指令函数中传递
- 如何从 JavaScript 调用指令函数
- Angular.js调用控制器中的指令函数
- 将事件发送到范围中的角度指令函数
- 从父指令角度调用指令函数
- 在具有不同控制器的视图中使用ng-click和指令函数
- 通过参数将 mongo 文档 ID 传递给角度指令函数会抛出解析错误
- Angular指令——函数执行的正确顺序
- 又一个没有传递参数的Angular指令函数
- 如何使子链接指令函数在父控制器之前运行
- AngularJS中指令函数的执行顺序
- 在没有应用指令函数的指令内部重复
- 使用$scope.$parent.$$childHead从控制器访问指令函数.AngularJS中的functionNa
- angularjs设计.从另一个控制器调用指令函数
- 调用angularjs指令函数的范围问题