javascript 为什么 ng-click 在我的指令中不起作用，我该如何添加切换类？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17567383/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why doesn't ng-click work in my directive and how do I add a toggle class?
提问by Joel
I've created a directive in Angular that looks like this:
我在 Angular 中创建了一个如下所示的指令：
angular.module('msfApp')
.directive('listitem', function () {
return {
templateUrl: 'assets/templates/directives/listitem.html',
restrict: 'E',
scope: {
'item': '='
}
}
});
And the template looks like so:
模板看起来像这样：
<div class="tsProductAttribute" ng-click="toggleInBasket(item)">
<span class="tsProductAttribute-image">
<img ng-src="{{item.variants[0].image}}">
</span>
<span class="tsProductAttribute-desc">{{item.productName}}</span>
<span class="tsProductAttribute-price">{{item.variants[0].price[0].amount}} {{item.variants[0].price[0].entity}}</span>
</div>
But now I have two questions:
但现在我有两个问题：
- The ng-click function doesn't fire in my controller,
toggleInBasket(item), why is that? - And secondly, how do I add a toggle behaviour to the list item so that it toggles a class called "tsProductAttribute--selected"
- 我的控制器中没有触发 ng-click 功能
toggleInBasket(item)，这是为什么？ - 其次，如何向列表项添加切换行为，以便它切换名为“tsProductAttribute--selected”的类
Thanks in advance guys!
在此先感谢各位！
回答by Macros
1) Problem is the isolated scope. You cannot see the function in the controller scope. One solution is to pass the function reference to the directive:
1）问题是孤立的范围。您无法在控制器范围内看到该功能。一种解决方案是将函数引用传递给指令：
http://plnkr.co/edit/GorcZZppa8qcIKbQAg2v?p=preview
http://plnkr.co/edit/GorcZZppa8qcIKbQAg2v?p=preview
<body ng-controller="ItemController">
<listitem item="item" item-click="toggleInBasket(item)"></listitem>
</body>
in the directive:
在指令中：
scope: {
'item': '=',
'itemClick': '&'
}
and in the template:
并在模板中：
<div class="tsProductAttribute" ng-click="itemClick(item)">
2) Create another function in the directive to toggle selected state and call the controller function:
2）在指令中创建另一个函数来切换选定状态并调用控制器函数：
angular.module('msfApp').directive('listitem', function () {
return {
templateUrl: 'listitem.html',
restrict: 'E',
scope: {
'item': '=',
'itemClick': '&'
},
link: function(scope, iElement, iAttrs) {
scope.selected = false;
scope.toggleState = function(item) {
scope.selected = !scope.selected;
scope.itemClick(item);
}
}
}
});
and toggle the class in the template:
并切换模板中的类：
<div class="tsProductAttribute"
ng-class="{'tsProductAttribute--selected': selected}"
ng-click="toggleState(item)">
回答by Ajay Beniwal
This is happening because you are using isolated scopes in the directive using scope: { 'item': '=' } which creates a new scope so your ng-click is not able to bind to controller function.
发生这种情况是因为您在使用 scope: { 'item': '=' } 的指令中使用了隔离范围，这会创建一个新范围，因此您的 ng-click 无法绑定到控制器功能。
Kindly refer to below link to call parent function using ng-click
请参考以下链接使用 ng-click 调用父函数
calling method of parent controller from a directive in AngularJS
回答by Joel
@Macros answer made it work just fine for me! Here's my finished code:
@Macros 的回答使它对我来说很好用！这是我完成的代码：
Directive template file:
指令模板文件：
<div class="tsProductAttribute"
ng-class="{'tsProductAttribute--selected': selected}"
ng-click="toggleState(item)">
<span class="tsProductAttribute-image">
<img ng-src="{{variantImage}}">
</span>
<span class="tsProductAttribute-desc">{{item.productName}}</span>
<select ng-model="variantImage">
<option ng-repeat="variant in item.variants" value="{{variant.image}}">{{variant.name}} - {{variant.listprice.amount}}</option>
</select>
<span class="tsProductAttribute-price">{{item.variants[0].listprice.amount}} {{item.variants[0].listprice.entity}}</span>
</div>
Directive:
指示：
angular.module('msfApp')
.directive('listitem', function () {
return {
templateUrl: 'assets/templates/directives/listitem.html',
restrict: 'E',
scope: {
'item': '=',
'itemClick': '='
},
link: function(scope, iElement, iAttrs) {
scope.selected = false;
scope.toggleState = function(item) {
scope.selected = !scope.selected;
scope.itemClick(item);
}
}
}
});
Directive implementation:
指令实施：
<listitem item="item" item-click="toggleInBasket"></listiten>
Function in the Controller:
控制器中的功能：
$scope.toggleInBasket = function(item) {
$scope.basket.toggle(item);
console.log(basket.get());
}
