Question

我正在尝试在指令之间创建一种通用切换功能，其中包含模板的一个指令不会呈现，直到从另一个指令发生事件。关于如何将它们联系在一起的任何建议？

谢谢！

Answer 1

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

A

使用事件（但要小心，如果过度使用，尤其是指令之间的交互，你很容易迷失！这就是为什么我没有为它创建http://plnkr.co，更糟糕的是：

代码A未经测试！

所以请在出现错误的情况下编辑

使用$rootScope.$on('myEvent', function(e, eargs) {...}) 主指令。
从某个指令发送事件： $rootScope.$broadcast('myEvent', {foo: 'bar'})。
记得在两个指令中注入$rootScope。

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'});
      }
    }
  });

乙

使用“共享控制器”是更简洁但更复杂的方式。这种方法的类型更强，你表达了工作流程，一旦它工作，它就不容易打破。

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

在主指令上使用控制器：controller(scope,element,attrs) {...}
在奴隶指令中要求您的masterDirective：require: 'myMasterDirective'
master指令的控制器是slave的链接函数的第四个参数（因为你需要它），你可以调用一个函数让master包含模板。

<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触发另一个指令

1 个答案:

A

代码A未经测试！

乙