CODEWITHSUNDEEP
angularjs
Eduardo Henrique
Eduardo Henrique

Reputation: 318

Function inside directive not being triggered

Why my function toggleCategory function is not being triggered?

Directive

app.directive('asideFilter', function() {
  return {
    restrict: 'E',
    scope: {
        toggleCategory: '=&onToggleCategory'
    },
    transclude: true,
    templateUrl: 'assets/directives/asideFilter/asideFilter.html',
    link: function(scope, element, attrs){
    }
  };
});;

Directive template

<div ng-click="toggleCategory({id: 'teste'})">TEST</div>

Parent scope

  $scope.onToggleCategory = function () {
    console.log('onToggleCategory');
  }

Parent Caller

<aside-filter toggle-category="onToggleCategory({id: 'test '})" categories="categories" />

Upvotes: 0

Views: 39

Answers (1)

Hmahwish
Hmahwish

Reputation: 2232

You can call the parent controller function like this also

app.directive('asideFilter', function() {
 return {
 restrict: 'E',
 scope: {
    toggleCategory: '&',
 },
 transclude: true,
 templateUrl: 'assets/directives/asideFilter/asideFilter.html',
link: function(scope, element, attrs){
 scope.toggleCategoryClick = function (value) {
 scope.toggleCategory(value);
  }
 }
};
});

Directive template

<div ng-click="toggleCategoryClick({id: 'teste'})">TEST</div>

Directive Element

<aside-filter toggle-category="onToggleCategory({id: 'test '})" categories="categories" />

Upvotes: 1

Related Questions