我是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 回答
弑天下
TA贡献1818条经验 获得超8个赞
在您的示例中，指令结构不是父子结构。因此，您无法通过其控制器共享方法。我会用$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;
});
}
}
});
饮歌长啸
TA贡献1951条经验 获得超3个赞
我正在使用的是导出指令控制器。假设我有以下指令：
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();
}
}
});
添加回答
举报
0/150
提交
取消