Question

仅从页面模板（使用控制器）传递回调时，this answer正确地说明了如何在指令模板中使用值作为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），并且您希望从{{ 1}}至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

我正在努力寻找一种适当地解释它的方法，但是通过此示例，您应该能够看到表达式如何向每个父级冒泡的模式。

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

1 个答案: