Question

我在我的应用中创建了重复我的产品的指令，并且它的工作正常。但是在这个指令中我点击了ng-click，当我点击这个链接时，点按“不要点击”。

这是我的指令代码：

   yAxis: [{
        labels: {
            style: {
                color: "#4553c5"
            }
        },
        title: {
            text: "ppm",
            align: "high",
            rotation: 0,
            x: 10,
            y: -30,
            textAlign: 'left',
            style: {
                color: "#4553c5"
            }
        },
        min: 330,
        max: 410,
        tickInterval: 10,
        gridLineWidth: 1,
        gridLineColor: '#efefef',
        endOnTick: false
    }, {
        labels: {
            style: {
                color: "#ec5d61"
            }
        },
        title: {
            text: "°C Anomaly",
            align: "high",
            rotation: 0,
            textAlign: "right",
            x: -10,
            y: -30,
            style: {
                color: "#ec5d61"
            }
        },
        min: -0.6,
        max: 1.1,
        tickInterval: 0.2,
        gridLineWidth: 1,
        gridLineColor: '#efefef',
        opposite: true,
        endOnTick: false
    }],

我在html中调用此指令，如下所示：

appMainModule.directive('product', ['$compile', function($compile) {
    return {
        restrict: 'E',
        replace : true,
        terminal: true,
        scope : {
          data: '=',
          filter: '='
        },
        link: function(scope, element, attrs) {
          var filterString, template;
          if (scope.filter === 0) {
            filterString = "product in data";
          } else{
            filterString = "product in data | filter:{mainCategoryID : filter}:true"
          }
          template =
                '<div class="single" data-ng-repeat="'+filterString+'" on-finish-render="ngRepeatFinished">' +
                    '<div class="product">' +
                        '<figure>' +
                          '<span class="product__in-card" id="{{product.productID}}">06ye</span>' +
                          '<span class="product__sale" ng-show="product.promotionPrice > 0">sale</span>' +
                          '<a class="product__favorite" ng-click="productFavorite($event)"><icon p="heart"></icon></a>' +
                          '<div class="warpper-addcart">' +
                            '<a class="btn-addcart"  ng-click="addToCrd(product,true)" v-pressable><icon p="shopping-add"></icon></a>' +
                            '<a class="btn-remove-cart" ng-click="removeOneFromCrd(product,true)" v-pressable><icon p="shopping-remove"></icon></a>' +
                          '</div>' +
                          '<a ng-click="imageclick(product)" data-remodal-options="hashTracking: false">' +
                            '<img ng-src="https://swiftcow.blob.core.windows.net/productimages/{{product.imageName}}" alt="{{product.productName}}">' +
                          '</a>' +
                        '</figure>' +
                        '<a ng-click="imageclick(product)" ng-show="product.productName.length > 53"><h3>{{product.productName | limitTo: 53}} ...</h3></a>'+
                        '<a ng-click="imageclick(product)" ng-hide="product.productName.length > 53"><h3>{{product.productName}}</h3></a>' +
                        '<span class="product__price" ng-hide="product.promotionPrice > 0">{{product.currency}} {{product.price}}</span>' +
                        '<span class="product__price" ng-show="product.promotionPrice > 0">{{product.currency}} {{product.promotionPrice}}</span>' +
                        '<span class="product__weight" ng-if="product.step == 1">{{product.step}} {{product.unitType}}</span>' +
                        '<span class="product__weight" ng-if="product.step == 1">{{product.step}} {{product.unitType}}</span>' +
                        '<span class="product__weight" ng-if="product.step > 1">{{product.step}} {{product.unitType}}s</span>' +
                    '</div>' +
                '</div>';
            // Render the template.
            element.html('').append($compile(template)(scope));
        }
    }
}]);

我如何处理ng-click in指令？

Answer 1

您应该将controller添加到directive。此控制器是您使用的外部控制器。

 return {
    restrict: 'E',
    replace : true,
    terminal: true,
    scope : {
      data: '=',
      filter: '='
    },
    controller:"SomeController as ctrl"

并在模板中更改为：

   '<a class="product__favorite" ng-click="ctrl.productFavorite($event)"><icon p="heart"></icon></a>' +

Demo

在angular指令中处理ng-click

1 个答案: