Why doesn't ng-click work in my directive and how do I add a toggle class?
Question
I've created a directive in Angular that looks like this:
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"
Thanks in advance guys!
3 answers
solution1
12 ACCPTED 2013-07-10 10:17:14
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:
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:
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)">
solution2
1 2013-07-10 10:07:20
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.
Kindly refer to below link to call parent function using ng-click
calling method of parent controller from a directive in AngularJS
solution3
1 2013-07-10 11:40:24
@Macros answer made it work just fine for me! Here's my finished code:
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());
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.