Question

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

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

示例：

我有一个名为＆＃34; card＆＃34;的角度指令。什么时候＆＃34;卡＆＃34;单击，我想将其flipped属性从false更改为true。

控制器 - 有一系列卡片

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

指令 - 呈现一张卡片，并具有＆＃34;翻转＆＃34;它

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()，而不是指令的范围。

我写的是这样的：

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

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

1 个答案: