如何在具有隔离范围的指令上使用 ng-click？

当范围在指令上继承时，我可以让 ng-click 工作，但在隔离时则不行。UPDATE: The point is that I want the click function to be defined as part of the directive... moving the function definition into a different scope is not what I want.

这是具有继承范围的工作示例：https://codepen.io/anon/pen/PGBQvj https://codepen.io/anon/pen/PGBQvj

这是具有隔离范围的损坏示例；https://codepen.io/anon/pen/jrpkjp https://codepen.io/anon/pen/jrpkjp

（单击数字，它们在第一个示例中增加，但在第二个示例中不增加）

一些代码...

The HTML

<div ng-app="myApp" ng-controller="baseController">
  <my-directive ng-click="hello()" current="current"></my-directive>
</div>

具有继承范围的指令：

angular.module('myApp', [])
    .controller('baseController', function($scope) {
    $scope.current = 1;
  })
    .directive('myDirective', function() {
    return {
      link: function(scope, element, attrs) {      
        scope.hello = function() {
          scope.current++
        };
      },
      replace: true,
      scope: true,
      template: '<div><child>      <strong>{{ current }}</strong></child></div>'
    }
    })
  .directive('child', function() {
    return {
      link: function(scope, element, attrs) {
        console.log("horeee");
      }
    }
  });

相同的指令但具有独立的范围：

angular.module('myApp', [])
    .controller('baseController', function($scope) {
    $scope.current = 1;
  })
    .directive('myDirective', function() {
    return {
      link: function(scope, element, attrs) {      
        scope.hello = function() {
          scope.current++
        };
      },
      replace: true,
      scope: {
        current:'='
      },
      template: '<div><child>      <strong>{{ current }}</strong></child></div>'
    }
    })
  .directive('child', function() {
    return {
      link: function(scope, element, attrs) {
        console.log("horeee");
      }
    }
  });

问题是你试图调用一个未定义的函数。如果您希望在独立指令内定义逻辑，则无需传入函数引用。

<my-directive current="current"></my-directive>

你无法通过ng-click="hello()"这里。这是控制器的范围，所以hello()未定义。

相反，移动ng-click指令模板的事件

template: '<div ng-click="hello()">

补充一点： 您正在使用link()该指令的功能。这是为 DOM 操作保留的。相反，定义hello()内controller功能。

controller: function ($scope) {
  $scope.hello = function() {
      $scope.current++
  }
},

不过，我认为这里存在一个更大的架构问题。独立指令或组件的要点是将逻辑封装在其自身内部。它不应该操纵外部状态。在此示例中，您将增加一个数字。如果在应用程序的另一部分中您希望减少一个数字怎么办？使用递减逻辑复制指令会导致大量代码重复。

相反，您应该在控制器中定义增量或减量功能，并将其传递给指令。

<my-directive change-number="increment()" current="current"></my-directive>

然后，使用&将函数引用绑定到指令的语法：

scope: {
  current:'=',
  changeNumber: '&'
},

并打电话changeNumber从模板中。这样做非常有利于代码的重用。