AngularJS bind clicking instead of ng-click

Question

I was looking at AngularJs and have a question, this is my directive:

myApp.directive("enter", function(){
return{
    restrict: 'A',
    scope:{},
    controller: function($scope){
        $scope.logSomething=function(somevalue){
            console.log(somevalue+" is logged");
        }
    },
    template: '<input type="text" ng-model="myModel">'+
              '<div ng-click="logSomething(myModel)">click me</div>'
}
})

This works, but my question is how can I do the same thing using bind clicking instead of ng-click directive? Not that it is better(maybe?), but for curiosity

it should be including something like this but couldn't get the big picture:

 function(scope, element, attrs){
    element.bind("click", function(){
        scope.$apply(attrs.enter);
    })

Use link:function(scope, element, attrs){ element.bind("click", function(){ scope.$apply(attrs.enter); }) — AlwaysALearner
– AlwaysALearner, Commented Aug 6, 2013 at 11:44
Right. Sorry. So element is not what we exactly want. You can access the target div using jquery. Not ideal. Or you can implement another directive over the target div. — AlwaysALearner
– AlwaysALearner, Commented Aug 6, 2013 at 11:49

Ivan Chernykh · Accepted Answer · 2013-08-06 11:52:44Z

16

Try this one:

myApp.directive("enter", function(){
  return{
    restrict: 'A',
    scope:{},
    controller: function($scope){
        $scope.logSomething=function(somevalue){
            console.log(somevalue+" is logged");
        }
    },
    template: '<input type="text" ng-model="myModel">'+
              '<div button>click me</div>'
}
});

myApp.directive("button", function(){   
  return{
    restrict: 'A',
    link: function(scope , element){
       element.bind("click", function(e){
          scope.logSomething( scope.myModel );
       });
    }
}
});

Plunk: http://plnkr.co/edit/RCcrs5?p=preview

answered Aug 6, 2013 at 11:52

Ivan Chernykh

42.2k13 gold badges136 silver badges148 bronze badges

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

14 Comments

Spring Over a year ago

tnx so we need 2 directives for that? i was wondering if thats possible doing everything in same directive

Ivan Chernykh Over a year ago

@Spring Seems like it is not a best practice to put such a different functonalities together in a one directive.. Definitely it will be non reusable. You can try another syntax if you like: plnkr.co/edit/arbMYg

Blackhole Over a year ago

As suggest in the comments, you can also access the div in a jQuery way (for instance, element.children('div').bind(...)). But that's a bad idea, because only one directive here is clearly mixing of concerns.

Spring Over a year ago

@Cherniv if I put that "<div button>click me</div>" in html instead of directive is that still ok? without changing anything else

Ivan Chernykh Over a year ago

@Spring they're both in the same scope just if you're not defining private scope in your "enter" directory like this: scope:{}

|

Blackhole · Accepted Answer · 2013-08-06 11:48:27Z

3

As you pointed out, you can simply use element.bind:

myApp.directive(
    'clickMe',
    function () {
        return {
            template : '<div>Click me !</div>',
            replace : true,
            link : function (scope, element) {
                element.bind('click', function ()
                {
                    alert('Clicked !');
                });
            },
        };
    }
);

Fiddle

But of course, in your case, you must use ngClick instead.

answered Aug 6, 2013 at 11:48

Blackhole

20.5k7 gold badges72 silver badges69 bronze badges

2 Comments

Spring Over a year ago

tnx, but why I "must" use ng-click? also I cant see the input field in your example?

Blackhole Over a year ago

This directive is a "subdirective", which only replaces the div in the directive you've shown. Cherniv has given a more complete example. You must use ngClick because this is a basic function of AngularJS. There is no point in trying to reimplement an already existent functionality.

Collectives™ on Stack Overflow

AngularJS bind clicking instead of ng-click

2 Answers 2

14 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

14 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related