将数据从指令内的 ng-click 传递到控制器中的函数中 [英] Passing data from ng-click within directive into a function in the controller
问题描述
我发现了这个问题,这让我几乎达到了我需要的地方.为什么 ng-click 在我的指令中不起作用,我该如何添加切换类?
这使得我的指令模板中的 ng-click 触发了我的控制器中的函数.http://plnkr.co/edit/GorcZZppa8qcIKbQAg2v?p=preview
问题在于返回给我的控制器(项目)的参数未定义.我需要它来实际传递来自指令中变量的数据,以便在我将在控制器中运行的函数中使用.
指令模板文件
<span class="tsProductAttribute-image"><img ng-src="{{variantImage}}"></span><span class="tsProductAttribute-desc">{{item.productName}}</span><选择 ng-model="variantImage"><option ng-repeat="variant in item.variants" value="{{variant.image}}">{{variant.name}} - {{variant.listprice.amount}}</option></选择><span class="tsProductAttribute-price">{{item.variants[0].listprice.amount}} {{item.variants[0].listprice.entity}}</span>
指令
angular.module('msfApp').directive('listitem', function () {返回 {templateUrl: 'assets/templates/directives/listitem.html',限制:'E',范围: {'项目':'=','itemClick': '&'},链接:功能(范围,iElement,iAttrs){scope.selected = false;scope.toggleState = 函数(项目){scope.selected = !scope.selected;scope.itemClick(item);}}}});
指令实施
<listitem item="item" item-click="toggleInBasket(item)"></listitem>
控制器中的函数
$scope.toggleInBasket = function(item) {$scope.basket.toggle(item);控制台日志(basket.get());}
(item) 未定义
在将函数传递给指令隔离作用域时,您应该使用 &
(表达式绑定)来传递方法引用.在 item-click
上,您应该提到对控制器方法的实际调用,例如 toggleInBasket(item)
标记
<listitem item="item" item-click="toggleInBasket(item)"></listitem>
然后在从指令调用方法时,您应该将其调用为 scope.itemClick({item: item})
指令
angular.module('msfApp').directive('listitem', function () {返回 {templateUrl: 'listitem.html',限制:'E',范围: {'项目':'=','itemClick': '&'//&改为表达式绑定},链接:功能(范围,iElement,iAttrs){scope.selected = false;scope.toggleState = 函数(项目){scope.selected = !scope.selected;scope.itemClick({item: item});//更改了传递项目值的调用}}}});
I found this question which gets me almost to where I need to be. Why doesn't ng-click work in my directive and how do I add a toggle class?
Which makes it so my ng-click within my directive template triggers a function in my controller. http://plnkr.co/edit/GorcZZppa8qcIKbQAg2v?p=preview
The issue is that the parameter returned to my controller (item) is undefined. I need this to actually pass data from a variable within my directive to be used in the function that I will run in the controller.
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(item)"></listitem>
Function in controller
$scope.toggleInBasket = function(item) {
$scope.basket.toggle(item);
console.log(basket.get());
}
(item) is undefined
While passing function to directive isolated scope, you should be using &
(expression binding) to pass method reference. On item-click
you should mentioned actual call to controller method like toggleInBasket(item)
Markup
<listitem item="item" item-click="toggleInBasket(item)"></listitem>
And then while calling method from directive you should call it as scope.itemClick({item: item})
Directive
angular.module('msfApp').directive('listitem', function () {
return {
templateUrl: 'listitem.html',
restrict: 'E',
scope: {
'item': '=',
'itemClick': '&' // & changed to expression binding
},
link: function(scope, iElement, iAttrs) {
scope.selected = false;
scope.toggleState = function(item) {
scope.selected = !scope.selected;
scope.itemClick({item: item}); //changed call to pass item value
}
}
}
});
这篇关于将数据从指令内的 ng-click 传递到控制器中的函数中的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!