在 Angular 指令中为 ng-click 定义一个函数答案

【问题标题】：Define a function for ng-click in an Angular directive在 Angular 指令中为 ng-click 定义一个函数
【发布时间】：2015-03-14 23:05:40
【问题描述】：

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

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

示例：

我有一个名为“card”的角度指令。单击“卡片”时，我想将其flipped 属性从false 更改为true。

控制器 - 有一系列卡片

$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 中定义的那样。这是一个适用于绑定的解决方案。我正在寻找适用于 ng-click 的解决方案。

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

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

【问题讨论】：

如果你想在指令之外获取 HTML 元素并让它们访问指令内的范围，则需要使用嵌入。另外，scope.flipped 并没有什么意义，因为flipped 是卡片的属性，而不是指令的属性....
angular-tips.com/blog/2014/03/transclusion-and-scopes

标签： javascript angularjs

【解决方案1】：

问题是ng-click 在您的<card> 元素上尝试从控制器的范围而不是指令的范围调用flipCard()。

我会这样写：

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

【讨论】：