时间戳

首页 > 解决方案 > 如何将指令内部定义的函数传递给另一个指令？

angularjs - 如何将指令内部定义的函数传递给另一个指令？

问题描述

我需要将指令中定义的函数传递给另一个函数，我的代码如下所示

angular
  .module('myApp')

  .controller('myAppCtrl', function($scope) {})

  .directive('first', function() {
    return {
      restrict: 'E',
      scope: {
        originFn: '&',
      },
      template: '<button ng-click="originFn()" >Click</button>',
      controller: function() {
        var self = this;

        self.originFn = function() {
          console.log('called from First');
        };
      },
    };
  })

  .directive('second', function() {
    return {
      restrict: 'E',
      scope: {
        passedFn: '&',
      },
      template: '<button ng-click="passedFn()" >Click</button>',
    };
  });

html

<div ng-controller="myAppCtrl">
  <first origin-fn="originFn" />
  <second passed-fn="originFn" />
</div>;

当点击第二个按钮原点功能未被调用时，

如何在第二个指令中传递要调用的函数？

标签： angularjs

解决方案

两个指令都是兄弟，没有共同点，一个指令不能调用另一个指令控制器而不是它的孩子。

因此，如果您可以将第二个指令嵌套到第一个指令中，则可以使用require功能来获取父指令控制器。

.directive('second', function () {
    return {
        restrict: 'E',
        require: '^^first',
        scope: {},
        template: '<button ng-click="innerFunc()" >Click</button>',
        link: function ($scope, $elem, $attr, firstCtrl) {
          // -------------------------------------^
          $scope.innerFunc = firstCtrl.originFn;
        }
    };
})

<div ng-controller="myAppCtrl">
  <first>
    <second></second>
  </first>
</div>

有关更完整的示例。

推荐阅读