Event handler inside angular directives

Question

I am trying to understand a bit further how directives work, so I wrote this simple directive:

Avraam.directive('whoami',function(){
    return{
        restrict:'A',
        template:"<label id='avraam'>Avraam</label>",
        link:function(scope, element, attrs) {
            var avraam = $(element).find('#avraam');
            $(avraam).hide();

        }
    }
});

People support that the DOM manipulation should be done inside the directive, so I want to ask how can I create an ng-click event handler inside the directive, when the user clicks on the element the elemented will be hidded.

Anthony Chu · Accepted Answer · 2014-05-13 16:09:08Z

If all that is needed is to hide the element, it can be achieved via ngClick and ngHide in the template...

Avraam.directive('whoami',function(){
    return{
        restrict:'A',
        scope: {},
        template:"<label ng-click='hidden = true' ng-hide='hidden' id='avraam'>Avraam</label>"
    }
});

JSFiddle

If you need a click handler to do some other work, you can use ngClick in the template to call a method on the scope...

Avraam.directive('whoami',function(){
    return{
        restrict:'A',
        template:"<label ng-click='doSomething()' id='avraam'>Avraam</label>",
        controller: function ($scope, $element) {
            $scope.doSomething = function () {
                // do work with $element here
                alert($element.text());
            };
        }
    }
});

JSFiddle

And here's a variation using a click handler...

Avraam.directive('whoami',function(){
    return{
        restrict:'A',
        template:"<label id='avraam'>Avraam</label>",
        link: function (scope, element) {
            element.on("click", function () {
                alert(element.text());
            });
        }
    }
});

MDiesel · Accepted Answer · 2014-05-13 15:56:58Z

1

ng-click is a directive, it sounds like you want to add a click handler to your own directive. To do this you would simply add the handler to your element in the link method:

Avraam.directive('whoami',function(){
    return{
        restrict:'A',
        template:"<label id='avraam'>Avraam</label>",
        link:function(scope, element, attrs) {
            element.bind("click", function(){
                $(this).hide();
            });
        }
    }
});

edited May 13, 2014 at 15:56

answered May 13, 2014 at 15:51

MDiesel

2,65713 silver badges15 bronze badges

2 Comments

Avraam Mavridis Over a year ago

Yes, I want to add a click handler to your my directive

MDiesel Over a year ago

@Avraam I updated the code to hide the element on click

Collectives™ on Stack Overflow

Event handler inside angular directives

2 Answers 2

Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Related