javascript - 在 Angular 指令中定义 ng-click 的函数

Question

如何在 Angular 指令中附加要与 ng-click 一起使用的函数？

我已经在 link 函数中定义了我的点击处理程序。在我的指令的 ng-click 属性中使用此函数不会运行它。

示例:

我有一个名为“card”的 Angular Directive(指令)。单击“card”时，我想将其 flipped 属性从 false 更改为 true。

Controller - 有一系列卡片

$scope.cards = [
  {id: 23, flipped: false},
  {id: 315, flipped: false},
  {id: 182, flipped: false}
];

指令 - 渲染一张卡片，并具有“翻转”它的功能。

myApp.directive('card', function(){
  return {
    scope: {
      card: "="
    },
    link: function(scope, elem, attrs) {
      // Create a function that will be called on click via ng-click.
      scope.flipCard = function(){
        console.log('fipped!');
        scope.card.flipped = true;
      }
    },
    template: "<div>I'm a card</div>"
  }
});

html - 显示所有卡片

<div ng-repeat="card in cards">
  <card card="card" ng-click="flipCard()"></card>
</div>

单击卡片时，不会调用 flipCard() 函数。这是为什么？

注意

我知道使用 bind 在 link 中附加处理程序。我特别询问为什么 ng-click 似乎无法访问该指令的范围(如 link 中所定义)。这是一个与绑定(bind)一起使用的解决方案。我正在寻找一个与 ng-click 一起使用的解决方案。

link: function(scope, elem, attrs) {
  elem.bind('click', function(e){
    scope.flipCard();
  });

  scope.flipCard = function(){
    console.log('tap!');
    scope.card.flipped = true;
  }; 
}

Answer 1

问题是 ng-click在您的<card>上元素尝试调用 flipCard()来自 Controller 的范围，而不是指令的范围。

我会写这样的东西:

http://plnkr.co/edit/Jvum0F?p=preview