2

我在 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>

但现在我有两个问题：

  1. 我的控制器中没有触发 ng-click 功能toggleInBasket(item)，这是为什么呢？
  2. 其次，如何向列表项添加切换行为，以便切换名为“tsProductAttribute--selected”的类

提前谢谢各位！

4

3 回答 3

12

1）问题是孤立的范围。您无法在控制器范围内看到该功能。一种解决方案是将函数引用传递给指令：

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) 在指令中创建另一个函数来切换选定状态并调用控制器函数：

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)">
于 2013-07-10T10:17:14.467 回答
1

发生这种情况是因为您在指令中使用了隔离范围，使用 scope: { 'item': '=' } 创建了一个新范围，因此您的 ng-click 无法绑定到控制器功能。

请参考以下链接以使用 ng-click 调用父函数

从AngularJS中的指令调用父控制器的方法

于 2013-07-10T10:07:20.167 回答
1

@Macros 的回答让它对我来说很好用！这是我完成的代码：

指令模板文件：

<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"></listiten>

控制器中的功能：

$scope.toggleInBasket = function(item) {
        $scope.basket.toggle(item);

        console.log(basket.get());

    }
于 2013-07-10T11:40:24.630 回答