Angular.js触发另一个指令 [英] Angular.js trigger another directive

问题描述

我试图创造一种指令，其中包含一个模板中的一个指令，不会渲染之间通用的切换功能，等到事件从另一个指令发生。如何联系在一起这有什么建议？

谢谢！

解决方案

有很多方法可以实现这一点。

A

使用事件（但要小心，exessively使用时，特别是对指令之间的互动，你可以容易迷路这就是为什么我没有创建一个http://plnkr.co它，更糟糕的：<！H3> code a一家未经测试！
那么请在错误的情况下编辑这个

 在（'myEvent'，函数（即eargs）{...}）在
1. 使用 $ rootScope。$
    主指令。

 
2. 派遣一些指令事件：
        $ rootScope $广播（'myEvent'，{富：巴'}）
。
 
3. 记得两个指令注入 $ rootScope 。

  angular.module（'masterDirective'，[]）
  .directive（'masterDirective'，函数（$ rootScope，$编译/ **这里注入* /）{
    VAR TEMPL ='＆LT; p NG绑定=someVar＆GT;＆LT; / P＆GT;';
    返回{
      限制：EA，
      范围： {}，
      链接：功能（范围，元素，ATTRS）{
        scope.someVar =我是一个模板，我出生和可见的世界，因为slaveDirective给我一个事件这样做。
        $ rootScope。在$（'myEvent'，函数（即eArgs）{
          // eArgs.myVar将是'杰克逊';
          element.append（$编译（TEMPL）（范围））;
        }）;
      }
    }
  }）;angular.module（'slaveDirective'，[]）
  .directive（'slaveDirective'，函数（$ rootScope）{
    返回{
      限制：EA，
      范围： {}，
      链接：功能（范围，元素，ATTRS）{
        $ rootScope $广播（'myEvent'，{myArg：'杰克逊'}）;
      }
    }
  }）;
 




---

乙

使用共享控制器是清洁器，但更复杂的方法。这种方法更加强类型的，你前preSS的工作流程，一旦它的工作原理，它是不容易折断。

演示： http://plnkr.co/WaqKzP

1. 在你的主人指令使用控制器：控制器（范围，元素，ATTRS）{...}


2. 需要从指令的masterDirective：要求：myMasterDirective


3. 主指令的控制器是你的奴隶的链接功能的第四个参数（因为你需要它），你可以调用一个函数，以使主包括模板。

＆LT;机身NG-应用=对myApp＆GT;
  ＆LT;按钮NG点击=includeSlave =真正的＆gt;包含从指令和LT; /按钮＆GT;
  ＆LT;主指令＆GT;
    ＆LT; D​​IV NG-IF =includeSlave ==真＆GT;
      ＆LT;奴隶指令＆GT;＆LT; /从指令性＆GT;
    ＆LT; / DIV＆GT;
  ＆LT; /主指令＆GT;
＆LT; /身体GT;


angular.module（'对myApp'，[]）
.directive（'masterDirective'，函数（$ rootScope，$编译/ **这里注入* /）{
    VAR TEMPL ='＆LT; p NG绑定=someVar＆GT;＆LT; / P＆GT;';
    返回{
        限制：'E'，
        控制器：函数（$范围，$元素）{
            返回{
                slaveLink：功能（）{
                    $ element.append（$编译（TEMPL）（$范围））;
                }
            }
        }，
        链接：功能（范围，元素，ATTRS）{
            scope.someVar =我是一个模板，我出生和可见的世界，因为slaveDirective叫上自己的函数来做到这一点。
        }
    };
}）.directive（'slaveDirective'，函数（）{
    返回{
        要求：'^ masterDirective'，
        限制：'E'，
        链接：功能（范围，元素，ATTRS，myMasterController）{
            myMasterController.slaveLink（）;
        }
    };
}）;


I'm trying to create a sort of generic toggle feature between directives, where one directive which contains a template does not render, until an event occurs from another directive. Any suggestions on how to link this together?

Thanks!

解决方案

There are many ways to achieve this.

A

Using events (but be careful, when used exessively, especially for interaction between directives, you can get lost easily! This is why I didnt create a http://plnkr.co for it, even worse:

code A is untested!

so pls edit this in case of errors

1. Use $rootScope.$on('myEvent', function(e, eargs) {...}) on the master directive.
2. dispatch the event from some directive: $rootScope.$broadcast('myEvent', {foo: 'bar'}).
3. remember to inject $rootScope in both directives.

angular.module('masterDirective', [])
  .directive('masterDirective', function ($rootScope, $compile /**injects here*/) {
    var templ = '<p ng-bind="someVar"></p>';
    return {
      restrict: 'EA',
      scope: {},
      link: function (scope, element, attrs) {
        scope.someVar = "I am a template and I was born and visible to the world, because slaveDirective send me an event to do so.";
        $rootScope.$on('myEvent', function(e, eArgs) {
          // eArgs.myVar will be 'Jackson';
          element.append($compile(templ)(scope));
        });
      }
    }
  });

angular.module('slaveDirective', [])
  .directive('slaveDirective', function ($rootScope) {
    return {
      restrict: 'EA',
      scope: {},
      link: function (scope, element, attrs) {
        $rootScope.$broadcast('myEvent', {myArg: 'Jackson'});
      }
    }
  });

---

B

Using a "shared controller" is the cleaner, but more complicated way. This approach is more strongly typed, you express the workflow and once it works, it is not as easy to break.

Demo: http://plnkr.co/WaqKzP

1. Use a controller on your master directive: controller(scope,element,attrs) {...}
2. require your masterDirective in slave directive: require: 'myMasterDirective'
3. the controller of the master directive is the fourth parameter of your slave's link function (because you required it), you can call a function to let the master include the template.

<body ng-app="myApp">
  <button ng-click="includeSlave=true">include slave directive</button>
  <master-directive>
    <div ng-if="includeSlave==true">
      <slave-directive></slave-directive>
    </div>
  </master-directive>
</body>

angular.module('myApp', [])
.directive('masterDirective', function ($rootScope, $compile /**injects here*/) {
    var templ = '<p ng-bind="someVar"></p>';
    return {
        restrict: 'E',
        controller: function ($scope, $element) {
            return {
                slaveLink: function() {
                    $element.append($compile(templ)($scope));
                }
            }
        },
        link: function (scope, element, attrs) {
            scope.someVar = "I am a template and I was born and visible to the world, because slaveDirective called a function on myself to do so.";
        }
    };
})

.directive('slaveDirective', function () {
    return {
        require: '^masterDirective',
        restrict: 'E',
        link: function (scope, element, attrs, myMasterController) {
            myMasterController.slaveLink();
        }
    };
});

这篇关于Angular.js触发另一个指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！