How to create click event using angular directive?

Question

I am very new to creating AngularJs directive , so below i have created directive and when user click on delete button i am checking what are the values of scope,element and attrs but its not printing anything in console. ProcessDTO is the json data in the controller.

Any idea what i am missing here, i have read the directive documentation but if someone can put some light and explain it as beginner level it would be great.

html

<button class="btn btn-danger"
        type="button" autodelete delete-tags="processDTO">Delete</button>

directive.js

angular.module('App').directive('autoDelete', function () {
    'use strict';
    return{
      restrict:'A',
      scope:{
      autoDeleteTags: '=deleteTags'
      },
      link:function(scope,element,attr){
        $(element).click(function(){
          console.log('Element',element);
          console.log('SCOPE',scope);
          console.log('ATTRS',attr);
        })
      }
  }

});

charlietfl · Accepted Answer · 2016-03-11 16:20:32Z

2

The directive named autoDelete is looking for attribute auto-delete not autodelete

Try:

<button class="btn btn-danger"
        type="button" auto-delete delete-tags="processDTO">Delete</button>

Also would suggest using ng-click instead of creating your own event handlers

answered Mar 11, 2016 at 16:20

charlietfl

172k14 gold badges125 silver badges154 bronze badges

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

4 Comments

hussain Over a year ago

Thanks that resolve the problem , but for attr it should print json object correct ? I dont see the object from controller.

charlietfl Over a year ago

Not really clear what you are asking. attr.deleteTags would be string == "processDTO"

hussain Over a year ago

may be i should ask if i have processDTO object in controller how can i access that in directive i thought we are accessing through attr.deleteTags.

hussain Over a year ago

Great i can see that printing scope.autoDeleteTags, Thank you

Collectives™ on Stack Overflow

How to create click event using angular directive?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related