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

但现在我有两个问题:
  • ng-click函数未在我的 Controller toggleInBasket(item)中触发,为什么?
  • 其次,如何将切换行为添加到列表项,以便它切换名为“tsProductAttribute--selected”的类

  • 在此先感谢大家!

    最佳答案

    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)">
    

    08-25 13:36
    查看更多