Question

我遇到的指令问题似乎最初很容易编写。根据我的理解，我的问题与评估表达式的范围有关。

还有一个带有演示的plunker。

我有一个带有控制器和指令的以下JavaScript代码：

angular.module('parentGet', [])
  .controller('Parent', function($scope) {
    $scope.foo = function() {
      alert('hello world');
    };
  })
  .directive('child', function() {
    return {
      restrict: 'A',
      scope: {
        fn: '&'
      },
      link: function($scope) {
        $scope.fn2 = function() {
          $scope.fn();
        }
      }
    };
  });

此代码用于以下HTML

<body ng-controller="Parent">
  <div child fn="foo" ng-click="fn2()">
    <h1>Test</h1>
  </div>
</body>

当我点击div时，ng-click被正确触发，但是当我在angular.js文件（line 22949 of the 1.3.8 version）中设置断点时，我可以看到ng-click是针对Parent控制器进行评估的范围而不是针对儿童指令的孤立范围。

任何使该代码有效的建议？

修改

更具体地说，我遇到的问题是永远不会调用fn2，这在我的情况下看起来很奇怪。 ng-click尝试再次评估 fn2（）表达式，该控制器作用域没有任何fn2函数，导致angular取得 noop 函数。

Answer 1

这是默认行为。从角度文档：

当用户点击对话框中的x时，指令关闭由于ng-click，函数被调用。这个电话关闭了隔离范围实际上是评估表达式hideDialog（）中的原始范围的上下文，从而运行Controller的hideDialog 功能

在此处查看https://docs.angularjs.org/guide/directive

回答编辑过的问题

你期望ng-click将调用指令函数fn2()的东西再次无法实现。由于angular将再次使用父控制器范围评估该函数调用。所以将代码更改为：

.directive('child', function() {
    return {
      restrict: 'A',
      scope: {
        fn: '&'
      },
      link: function($scope, element) {
        element.on('click', $scope.fn2);

        $scope.fn2 = function() {
          $scope.fn();
        }
      }
    };
  });

并将您的html代码段更改为：

<body ng-controller="Parent">
  <div child fn="foo">
    <h1>Test</h1>
  </div>
</body>

ngClick针对范围而不是isolateScope进行评估

1 个答案: