指令之间的AngularJS通信
我是Angular.js的新手，我的应用程序需要指令之间的某些通信，我阅读了一些有关链接和需求的文档，但无法确切了解其工作原理。
对于一个简单的例子，我有：live小提琴：http : //jsfiddle.net/yw235n98/5/
2个指令：firstDir，secondDir ::带有一些数据
firstDir具有单击功能，它将更改数据值
当firsDir单击功能被触发时，我也想在secondDir中更改数据。
HTML：
<body ng-app="myApp">
First Directive :
<first-dir >
<h3>{{firstCtrl.data}}</h3>
<button ng-click="firstCtrl.set('NEW VALUE')">Change Value</button>
</first-dir>
Second Directive :
<second-dir>
<h3>{{secondCtrl.data}}</h3>
</second-dir>
Javascript：
(function(){
var app = angular.module('myApp', []);
app.directive("firstDir", function(){
return {
restrict : 'E',
controller : function(){
this.data = 'init value';
this.set = function(value){
this.data = value;
// communication with second Directive ???
}
},
controllerAs : 'firstCtrl'
};
});
app.directive("secondDir", function(){
return {
restrict : 'E',
controller : function(){
this.data = 'init value';
},
controllerAs : 'secondCtrl'
};
});
})();
繁花如伊3回答
-
弑天下
在您的示例中，指令结构不是父子结构。因此，您无法通过其控制器共享方法。我会用$rootScope.$broadcast。（请参阅DOCS）一个指令调用：$rootScope.$broadcast('someEvent', [1,2,3]);第二条指令侦听： scope.$on('someEvent', function(event, mass) { console.log(mass)} );固定指令：app.directive("firstDir", function ($rootScope) { return { restrict: 'E', link: function (scope, element, attrs) { scope.dataToPass = 'empty'; scope.doClick = function (valueToPass) { scope.dataToPass = valueToPass; $rootScope.$broadcast('someEvent', { data: valueToPass }); } } };});app.directive("secondDir", function () { return { restrict: 'E', link: function (scope, element, attrs) { scope.receivedData = 'none'; scope.$on('someEvent', function (event, result) { scope.receivedData = result.data; }); } }}); -
饮歌长啸
我正在使用的是导出指令控制器。假设我有以下指令：app.directive('mainDirective', function () { return { require: 'mainDirective' restrict: 'E', scope: { controller: '=' }, controller: [ '$scope', function ($scope) { // controller methods this.doSomething = function () { ... }, $scope.controller = this return this } ], link: function (scope, element, attrs, mainDirective) { // some linking stuff } }});我的html看起来像这样：<main-directive controller="mainDirective"></main-directive><sub-directive main-directive="mainDirective"></sub-directive>如果我想从子指令控制主指令，我可以轻松地从它的作用域中获取它并做我想做的任何事情...app.directive('subDirective', function () { return { restrict: 'E', scope: { mainDirective: '=' } link: function (scope, element, attrs) { // do something with main directive scope.mainDirective.doSomething(); } }});
随时随地看视频慕课网APP
相关分类
AngularJS
JavaScript