為Angular指令中的ng-click定義函數

Question

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

我已經在link函數中定義了我的點擊處理程序。 在指令的ng-click屬性中使用此函數不會運行它。

例：

我有一個稱為“卡”的角度指令。 單擊“卡片”時，我想將其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;
  }; 
}

Answer 1

問題在於ng-click您的<card>元素會嘗試從控制器的作用域而不是指令的作用域調用flipCard() 。

我會這樣寫：

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