CODEWITHSUNDEEP
javascriptangularjsangularjs-scopeangular-directive
JOGO
JOGO

Reputation: 315

Angular.js: custom directive

I am trying to add custom directive in my app. But it is not getting called on button click event.

my controller-

appServices.directive('customClick', function() {
  return {
    restrict: 'E',
    require: 'ngModel',
    link: function($scope, element, attrs) {
            $scope.deleteFieldMap = function() {
              alert('inside click');
            }
          }
  }
}

my jsp-

<button custom-click class="btn btn-danger btn-sm" 
                     data-style="zoom-in"
                     ng-click="deleteFieldMap(editProductJob,$index)" 
                     name="jobFileKey"
                     title="Delete" >
    <span class="glyphicon glyphicon-remove"></span>
</button>

What i am doing wrong here?

Upvotes: 0

Views: 73

Answers (3)

Ahmad Mobaraki
Ahmad Mobaraki

Reputation: 8188

you should use your custom directive as follow:

<custom-click class="btn btn-danger btn-sm" 
              data-style="zoom-in"
              ng-click="deleteFieldMap(editProductJob,$index)"
              name="jobFileKey"
              title="Delete" >
    <span class="glyphicon glyphicon-remove"></span>
</custom-click>

as an element!

Upvotes: 0

Daniel Lavoie
Daniel Lavoie

Reputation: 1922

Your directive is restricted to 'E'. Which means to "element".

You should change it to 'A' since you expect an it as an "attribute".

Check out the reference documentation :

https://docs.angularjs.org/guide/directive

Edit : As explained by Medet, you also miss the "ng-model" on your element. Remove the definition if is his unecessary or add the attribute if you really expect it. Regards

Upvotes: 2

Medet Tleukabiluly
Medet Tleukabiluly

Reputation: 11940

First issue as noted above is element.restrict: 'A', seconds issue - you must have ng-model attribute on your button, demo below

angular.module('app', [])
  .run(function($rootScope) {
    $rootScope.test = '123qe';
  }).directive('customClick', function() {
    return {
      restrict: 'A',
      require: 'ngModel',
      link: function($scope, element, attrs, ngModelCtrl) {
        $scope.deleteFieldMap = function() {
          alert('inside click' + ngModelCtrl.$viewValue);
        }
      }
    }
  });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.js"></script>

<div ng-app="app">
  <button custom-click ng-click="deleteFieldMap(editProductJob,$index)" ng-model="test">
    remove
  </button>
</div>

Upvotes: 1

Related Questions