指令之间的AngularJS通信

作者: afs-loliaholic
发布时间: 2024-12-23 08:05:41 (3天前)
转自：

3 条回复

0#
回复此人
小鬼 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 从您的示例中，指令结构不是父子。因此，您无法通过其控制器共享方法。我会用 <code> $rootScope.$broadcast </code> 。（看到 <a href="https://docs.angularjs.org/api/ng/type/$rootScope.Scope" rel="noreferrer"> DOCS </A> ） </p> <P> 一条指令称： </p> <pre> <code> $rootScope.$broadcast('someEvent', [1,2,3]); </code> </pre> <P> 第二个指令侦听： </p> <pre> <code> scope.$on('someEvent', function(event, mass) { console.log(mass)} ); </code> </pre> <P> 演示 <KBD> 的<strong> <a href="http://jsfiddle.net/fess81/9Ymvt/2031/" rel="noreferrer"> 小提琴 </A> </强> </KBD> </p> <HR /> <P> <EM> 固定指令： </EM> </p> <pre> <code> 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; }); } } }); </code> </pre> </DIV>

编辑
1#
回复此人
大魔王 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 我正在使用的是导出指令控制器。假设我有以下指令： </p> <pre> <code> 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 } } }); </code> </pre> <P> 我的HTML看起来像这样： </p> <pre> <code> <main-directive controller="mainDirective"></main-directive> <sub-directive main-directive="mainDirective"></sub-directive> </code> </pre> <P> 如果我想从子指令控制main-directive，我可以轻松地从它的范围中获取它并做我想做的事...... </p> <pre> <code> app.directive('subDirective', function () { return { restrict: 'E', scope: { mainDirective: '=' } link: function (scope, element, attrs) { // do something with main directive scope.mainDirective.doSomething(); } } }); </code> </pre> </DIV>

编辑

登录后才能参与评论