javascript - AngularJs:使用 Angular 指令跨多个隔离范围传递函数参数

Question

我有 3 个嵌套的隔离作用域指令 ( see CodePen here )，我能够将一个函数(接受一个参数)从最外层指令传递到最内层指令(将函数从外部指令传递到中间指令到内部指令)。

我没能理解的是，要将参数从内部指令通过中间指令传回外部指令，需要做些什么。

再次参见 the CodePen example .

注意:仅给定 2 个独立作用域指令，我就可以使用类似于以下内容的东西...

angular.module('myApp', [])
  .directive('myDir1', function() {
    return {
      template: '<div><my-dir-2 add-name="addName(name)"></my-dir-2></div>',
      controller: function($scope) {
        $scope.addName = function(name) {
          alert(name); // alerts 'Henry'
        };
      }
    }
  })
  .directive('myDir2', function() {
    return {
      scope: {
        addName: '&'
      },
      template: "<span ng-click='addName({name: testName})'>Click to Add {{testName}}!</span>",
      controller: function($scope) {
        $scope.testName = 'Henry';
      }
    }
  });

上面的代码为我提供了一个带有“Henry”的警告框(正如我所期望的那样)。

当我添加第三个中间隔离范围指令时，我遇到了问题......

angular.module('myApp', [])
  .directive('myDir1', function() {
    return {
      template: '<div><my-dir-2 add-name="addName(name)"></my-dir-2></div>',
      controller: function($scope) {
        $scope.addName = function(name) {
          alert(name); // alerts 'Henry'
        };
      }
    }
  })
  .directive('myDir2', function() {
    return {
      scope: {
        addName: '&'
      },
      template: '<div><my-dir-3 add-name="addName({name: testName})"></my-dir-3></div>',
    }
  })
  .directive('myDir3', function() {
    return {
      scope: {
        addName: '&'
      },
      template: "<span ng-click='addName({name: testName})'>Click to Add {{testName}}!</span>",
      controller: function($scope) {
        $scope.testName = 'Henry';
      }
    }
  });

这段代码给我一个带有undefined的警告框...

Answer 1

一个常见的误解是“& 用于传递函数”。这在技术上是不正确的。

& 所做的是在指令作用域上创建一个函数，当调用该函数时，它会返回针对父作用域计算的表达式的结果。

此函数将一个对象作为参数，在本例中，该对象将使用指令范围({name: testName})对象覆盖表达式中的局部变量。

如果您深入了解，myDir2 中的 $scope.addName 方法将如下所示(简化):

$scope.addName = function(locals) {
    return $parse(attr.addName)($scope.$parent, locals);
}

你的第二个指令有效，因为它绑定(bind)到的表达式是

addName(name)

这个表达式有一个局部变量 name，当用

执行时，它被指令中的 testName 的值覆盖

addName({name: testName}) //in the directive. 

请记住 - myDir2 中的 addName 函数与 myDir1 中的 addName 函数不同。这是一个计算表达式的新函数

addName(name) 

针对父作用域并返回结果。

当您将此逻辑应用于 myDir3 时，计算的表达式为:

addName({name: testName})

请注意，此表达式中唯一的局部变量是“testName”。因此，当您使用

调用 myDir3 时

addName({name: testName})

没有要覆盖的局部变量 name，testName 未定义。

呸!难怪这让每个人都感到困惑!

如何在您的示例中修复:

您希望表达式计算为 myDir1 中的实际函数。

angular.module('myApp', [])
  .directive('myDir1', function() {
    return {
      template: '<div><my-dir-2 add-name="addName"></my-dir-2></div>',
      controller: function($scope) {
        $scope.addName = function(name) {
          alert(name); // alerts 'Henry'
        };
      }
    }
  })
  .directive('myDir2', function() {
    return {
      scope: {
        addName: '&'
      },
      // addName() returns the actual function addName from myDir1
      template: '<div><my-dir-3 add-name="addName()"></my-dir-3></div>',
    }
  })
  .directive('myDir3', function() {
    return {
      scope: {
        addName: '&'
      },
      //calls addName() on myDir2, which returns addName from myDir1, then invokes it passing testName as an argument
      template: "<span ng-click='addName()(testName)'>Click to Add {{testName}}!</span>",
      controller: function($scope) {
        $scope.testName = 'Henry';
      }
    }
  });

Here is the working Pen

最后的说明 - 这里 '&' 比 '=' 更合适的原因是 '=' 实际上会设置一个 $watch 并双向绑定(bind)指令之间的变量。这意味着 myDir2 实际上可以更改 myDir1 中的函数 appName，这不是必需的，也是不可取的。它还需要设置两个 $watch，出于 Angular 中的性能原因，我尽量避免这样做。