指令指令与角通信

Question

假设我的页面中有以下两个指令：

<todos></todos>
<calendar></calendar>

文件结构设置如下：

/todos

• todo-controller.js
• todo-directive.js
• todo-view.html

/calendar

• calendar-controller.js
• calendar-directive.js
• calendar-view.html

由于这两个指令“在同一级别上”，其中一个不包含在另一个指令中，因此不允许我在指令中使用require语法在todo控制器中执行这样的操作：

CalendarCtrl.foo()

现在，我使用了大量的广播和听众，它变得非常混乱。如何更容易地在这些文件之间共享功能，并保持文件结构不变？

Answer 1

文件/目录结构并不重要。您的指令文件(日历-directive.js，todo-directive.js)应该正确地加载到浏览器上，您可能会通过index.html (脚本标记)加载它。您必须正确定义模块、其依赖项和指令。例如

angular.module('mainModule', []);

angular.module('mainModule').directive('calendar' ['service1', 'service2', function(service1, service2) {

}]);

angular.module('mainModule').directive('todo' ['service1', 'service2', function(service1, service2) {
return {
restrict: 'AE', 
...
require: '^calendar', 
...
link : function($scope, element, attrs, CalendarCtrl) {
 CalendarCtrl.foo();
}
}
}]);

要在另一个指令中使用该指令，必须在DDO (目录定义对象)中适当地使用“require”。它的控制器将作为第四个参数注入到您的链接函数中。请注意，这两个指令都位于同一个模块“mainModule”中，它们的目录结构并不重要。

Answer 2

如果您只想在两个控制器之间共享一个值，您可以使用一个服务或一个工厂.

如果要在第一个控制器上调用的第二个控制器中触发一个事件，可以定义一个事件并使用要发送的数据通过$rootScope广播它。在我的示例中，我的事件名为'changeMyEntryEvent‘，数据是字符串'myNewEntry’。

app.controller('firstController', function ($scope,$rootScope) {

       $rootScope.$broadcast('changeMyEntryEvent', 'myNewEntry');

});

app.controller('secondController', function ($scope,$rootScope) {

       $rootScope.$on('changeMyEntryEvent', function (event, data) {
              //Execute your code on second Controller, triggered by firstController
       });

});