我在Angular中创建了一个如下所示的指令:
angular.module('msfApp')
.directive('listitem', function () {
return {
templateUrl: 'assets/templates/directives/listitem.html',
restrict: 'E',
scope: {
'item': '='
}
}
});
模板如下所示:
<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>
但现在我有两个问题:
toggleInBasket(item)
中触发,为什么? 在此先感谢大家!
最佳答案
1)问题是隔离范围。您无法在 Controller 范围内看到该功能。一种解决方案是将函数引用传递给指令:
http://plnkr.co/edit/GorcZZppa8qcIKbQAg2v?p=preview
<body ng-controller="ItemController">
<listitem item="item" item-click="toggleInBasket(item)"></listitem>
</body>
在指令中:
scope: {
'item': '=',
'itemClick': '&'
}
并在模板中:
<div class="tsProductAttribute" ng-click="itemClick(item)">
2)在指令中创建另一个函数以切换所选状态并调用 Controller 函数:
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);
}
}
}
});
并在模板中切换类:
<div class="tsProductAttribute"
ng-class="{'tsProductAttribute--selected': selected}"
ng-click="toggleState(item)">