我发现这个问题让我几乎到达了我需要的地方。 为什么 ng-click 在我的指令中不起作用,如何添加切换类?
这使得我的指令模板中的 ng-click 触发了我的控制器中的一个函数。 http://plnkr.co/edit/GorcZZppa8qcIKbQAg2v?p=preview
问题是返回给我的控制器(项目)的参数是 undefined。我需要这个来实际从我的指令中的变量传递数据,以便在我将在控制器中运行的函数中使用。
指令模板文件
<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>
指示
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);
}
}
}
});
指令实施
<listitem item="item" item-click="toggleInBasket(item)"></listitem>
控制器中的功能
$scope.toggleInBasket = function(item) {
$scope.basket.toggle(item);
console.log(basket.get());
}
(项目)未定义