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

Question

当范围在指令上继承时，我可以让 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/jrpkjp

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

一些代码...

的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");
      }
    }
  });

Answer 1

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

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

你不能通过 ng-click="hello()"这里。这是 Controller 的范围，所以hello()未定义。

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

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

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

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

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

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

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

然后，使用 &将函数引用绑定(bind)到指令的语法:

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

并调用changeNumber从模板。这样做非常有利于代码重用。