如何在 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;
};
}
最佳答案
问题是 ng-click
在您的<card>
上元素尝试调用 flipCard()
来自 Controller 的范围,而不是指令的范围。
我会写这样的东西:
关于javascript - 在 Angular 指令中定义 ng-click 的函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29055298/