Angular.js: custom directive

Question

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?

restrict: 'E' is used for element directives. What you are using is an attribute. So it should be restrict: 'A' — yeouuu
– yeouuu, Commented Mar 16, 2016 at 13:18

Daniel Lavoie · Accepted Answer · 2016-03-16 13:51:08Z

2

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

edited Mar 16, 2016 at 13:51

answered Mar 16, 2016 at 13:18

Daniel Lavoie

1,9321 gold badge16 silver badges19 bronze badges

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

Comments

Medet Tleukabiluly · Accepted Answer · 2016-03-16 13:41:30Z

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>

I have another issue here.. for the first time when am loading the view $scope, element, attrs values are comming properly. on save button i am redirecting to another view, again when i am returning to current view and when deleting a row am actually getting $scope, element, attrs values as undefined.. Why so?
@JOGO not sure what causes problem, maybe open new question?

nabinca · Accepted Answer · 2016-03-16 14:23:31Z

0

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!

edited Mar 16, 2016 at 14:23

nabinca

2,0221 gold badge19 silver badges30 bronze badges

answered Mar 16, 2016 at 13:23

Ahmad Mobaraki

8,2485 gold badges54 silver badges75 bronze badges

Collectives™ on Stack Overflow

Angular.js: custom directive

3 Answers 3

Comments

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Related