Как передать функцию, определенную внутри директивы в другую директиву?

Question

Мне нужно передать функцию, определенную в директиве, другой, мой код выглядит примерно так:

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>;

, когда нажатие на кнопку вызова второй функции не вызывается,

Как передать функцию для вызова внутри второй директивы?

Answer 1

Обе директивы - это братья и сестры, ничего общего нет, одна директива не может вызывать другой контроллер директивы, не будучи ее дочерью.

Итак, если вы можете вложить вторую директиву в первую, вы можете использовать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>

Для более полного примера .