在 Angularjs 中的指令之间传递回调

Question

仅从页面模板（带有控制器）传递回调时，正确解释了如何在指令模板中将回调的用法格式化为 JSON 对象，像这样：

<a data-ng-click="callback({image: url})"></a>

但是如果指令只是将回调传递给另一个指令，会发生什么情况。
它是否应该像这样传递回调：

<another-directive data-ng-click="callback()"></another-directive>

或者它应该像这样传递相同的对象格式：

<another-directive data-ng-click="callback({image: url})"></another-directive>

或者其他选择？
现在这些都不适合我。

Answer 1

我想我明白你想要完成的事情，所以我会举个例子。

您有一个控制器 (myController) 调用一个指令 (myDirective)，该指令调用另一个指令 (anotherDirective)，并且您想传递一个 "callback"从 myController 到 myDirective 一直到 anotherDirective。方法如下：

angular
  .module('myApp', [])
  .controller('myController', ['$scope', function($scope) {
    $scope.foo = function(param) {
      alert('This function is declared on the main controller but called from a directive a few levels deep.  Parameter: ' + param);
    };
  }])
  .directive('myDirective', function() {
    return {
      template: `
        <h1>My Directive</h1>
        <another-directive callback="myFunction(b)"></another-directive>
      `,
      scope: {
        myFunction: '&'
      }
    }
  })
  .directive('anotherDirective', function() {
    return {
      template: `
        <h2>Another Directive</h2>
        <button data-ng-click="callback({b: {a: 'hello world'}})">Click Me</button>
      `,
      scope: {
        callback: '&'
      }
    }
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController">
  <my-directive my-function="foo(a)"></my-directive>
<div>

关键从最底层的指令开始 anotherDirective:

<button data-ng-click="callback({b: {a: 'hello world'}})">Click Me</button>

现在记住 callback 是如何在其父项上设置的：

<another-directive callback="myFunction(b)"></another-directive>

以及 myFunction 最初是如何在其父项上声明的：

<my-directive my-function="foo(a)"></my-directive>

我正在努力想出一种正确解释它的方法，但是通过这个例子，您应该能够看到表达式如何向每个父级传递的模式。

在 Angularjs 中的指令之间传递回调

Passing a callback between directives in Angularjs

angularjs

angularjs-directive