将指令中的ng-click数据传递给控制器​​中的函数

Question

我发现这个问题让我几乎到了我需要的地方. 为什么ng-click不能在我的指令中工作？如何添加切换类？

这使得我的指令模板中的ng-click触发了我的控制器中的一个功能. http://plnkr.co/edit/GorcZZppa8qcIKbQAg2v?p=preview

问题是返回到我的控制器(项目)的参数是未定义的.我需要这个实际传递来自我的指令中的变量的数据,以便在我将在控制器中运行的函数中使用.

指令模板文件

<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());

    }

(项目)未定义

Answer 1

在将函数传递给指令隔离范围时,您应该使用&(表达式绑定)来传递方法引用.在item-click你应该提到实际调用控制器方法之类的toggleInBasket(item)

标记

<listitem item="item" item-click="toggleInBasket(item)"></listitem>

然后在从指令调用方法时,您应该将其称为 scope.itemClick({item: item})

指示

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
      }
    }
  }
});

在这里演示