handle ng-click in angular directive

Question

I create Directive for repeat my product in my app, and it's work fine. but in this directive i have ng-click and when I click on this link ng-click don't fire.

Here is my directive code:

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

and I call this directive in html like this:

<product data="products" filter="category.categoryID"></product>

How i can handle the ng-click in directive?

Where is your productFavorite functions within your scope? I assume it's in your parent scope. Try setting transclude to true. — Blue
– Blue, Commented Jun 7, 2016 at 9:49
@FrankerZ I add this, but we have still issue and nothing changed. — Dark star
– Dark star, Commented Jun 8, 2016 at 6:15

Hadi · Accepted Answer · 2016-06-07 10:21:34Z

1

you should add controller to your directive. this controller is external controller that you use.

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

and in template change to this:

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

Demo

edited Jun 7, 2016 at 10:21

answered Jun 7, 2016 at 10:14

Hadi

17.3k4 gold badges41 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Hadi Over a year ago

did you see my answer?

Dark star Over a year ago

I try this. and add my controller name as like you. but show me undefined error in console.

Hadi Over a year ago

do you use controllerAs syntax in your controller and view?

Dark star Over a year ago

What do you mean?!

Hadi Over a year ago

can you create plunker?

|

Collectives™ on Stack Overflow

handle ng-click in angular directive

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related