current community

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 2 down vote favorite

I have ng-click="foo()" which alert "foo" In my own directive, if ng-click is found, I want to add another function to alert "bar"

I tried this
DEMO: http://plnkr.co/edit/1zYl0mSxeLoMU3yjoGBV?p=preview

and it did not work

<!DOCTYPE html>
<html ng-app="myApp">
  <head>
    <script src="http://code.angularjs.org/1.2.7/angular.js"></script>
    <script>
    var app = angular.module('myApp', []);
    app.controller('MyCtrl', function($scope) {
      $scope.foo = function() { alert('foo'); }
      $scope.bar = function() { alert('bar'); }
    });
    app.directive("myAttr", function() {
      return {
        link: function(scope, el, attrs) {
          el.attr('ng-click', attrs.ngClick+';bar()');
        }
      }
    })
    </script>
  </head>

  <body ng-controller="MyCtrl">
    <a my-attr ng-click="foo()" href="">click here!</a>
  </body>
</html>

I was also not able to another ng-* directive to this to make it work, i.e. el.attr('ng-focus', 'bar()');. It seems that I cannot change or add ng-* directive once it is rendered.

How can I achieve this, and what was I doing wrong?

share|improve this question
 
Angular needs to compile your expression before it can setup watches and link to your controller function. –  Chandermani Jan 11 at 5:31
 
@Chandermani, that's what I thought and added ` el.html($compile(el)(scope));` after el.attr(..), and it makes the browser crashed, assuming loop happens(don't know why) –  allenhwkim Jan 11 at 5:43
 
Because compiling the directive element again causes link function to be called recursively. Move the element that you want to compile inside the directive and try. –  Chandermani Jan 11 at 6:54
 
@Chandermani, I don't get Move the element that you want to compile inside directive and try. I don't feel smart enough. I got to sleep then. –  allenhwkim Jan 11 at 7:00
 
Maybe something like <div my-attr><a ng-click="foo()" href="">click here!</a></div>. You link function would change accordingly. –  Chandermani Jan 11 at 7:05
show 2 more comments

3 Answers

up vote 3 down vote 
  app.directive("myAttr", function() {
  return {
      priority: 1,
      compile: function(el, attrs) {
       attrs.ngClick += ';bar()';
    }
  }
})

First of all you want a compile function, for when link is called, the ng-click directive is already set up.

The second important thing is to change the priority. You want to ensure that your directive is called before ng-click. ng-click has the default priority 0, so 1 is enough.

The last and important thing, which is not obvious, is that you don't want to change the element, but attrs itself. It is created only once per element. So when ng-click accesses it it would still contain the same value, if you changed the attribute on the element directly.

share|improve this answer
 
this is so hawt. I've been vaguely trying to come up with a use case for priority for a while. Is there any reason why this is better then my solution below? –  Abraham P Jan 12 at 9:51
 
@AbrahamP thx :) The big advantage is that it's independent of the existing expression. It doesn't matter if its' foo(), baz() or whatever. And it changes the expression before anything happens. So basically it's like bar() has always been there. –  zeroflagL Jan 12 at 10:21
add comment
up vote 2 down vote

I think you can do what you want with ngTransclude.

app.directive("myAttr", function() {
  return {
    transclude:true,
    template: '<span ng-click="bar()" ng-transclude></span>',
    link: function(scope, el, attrs) {
    }
  }
});

Does that work?

EDIT

Okay what about this one?

app.directive("myAttr", function($compile) {
  return {
    link: function(scope, el, attrs) {
      el.attr('ng-click', 'bar()');
      el.removeAttr('my-attr');
      $compile(el)(scope);
    }
  }
});
share|improve this answer
 
works, but bar() happens before foo() happens. it also rely on event bubbling. It's does not feel right. –  allenhwkim Jan 11 at 7:26
 
I think using $compile like that can be inefficient; it might do extra compiling. I don't know how to use pre- and post- links or whatever. I think that does what you want, though. –  Words Like Jared Jan 11 at 7:44
1  
I think your second method will only execute the bar() –  Akash Agrawal Jan 11 at 7:59
 
In the browser it did both for me. It gave me an error when I tried to save/fork the plunkr so you'll have to try yourself. If it doesn't work for you that's weird. –  Words Like Jared Jan 11 at 8:02
1  
@WordsLikeJared yeah you are right... but how come it is still executing foo when that attribute is completely replaced? –  Akash Agrawal Jan 11 at 8:12
show 2 more comments
up vote 2 down vote

While this could be done with compile as outlined above, that approach doesn't guarantee the order in which the ng-click items would be added to a DOM node (as you have already discovered), and is inherently slow (as has been pointed out by Words Like Jared.

Personally, I would just do something like this:

  <!DOCTYPE html>
  <html ng-app="myApp">

  <head>
     <link rel="stylesheet" href="style.css">
     <script src="http://code.angularjs.org/1.2.7/angular.js"></script>
     <script>
       var app = angular.module('myApp', []);
       app.controller('MyCtrl', function($scope) {
          $scope.foo = function() { alert('foo'); }
          $scope.bar = function() { alert('bar'); }
       });

       app.directive('myAttr', function() {
        return {
          scope: true,
          link: function(scope, el, attrs) {  
             if(attrs.hasOwnProperty('ngClick')){
                scope.foo = function(){
                   scope.$parent.foo();
                   scope.$parent.bar();
                }  
             }
          }
        };
      });
     </script>
   </head>

    <body ng-controller="MyCtrl">
      <a my-attr ng-click="foo()" href="">click here!</a>
    </body>

   </html>

Whats going on:

scope: true: By default directives do not create new scopes, simply sharing their parent scope. By setting scope: true, every instance of this directive will create a child scope, that will prototypically inherit from the parent scope.

Then you can simply override the method desired (foo()) and voila

Live demo:

http://plnkr.co/edit/8A8y96wAhqGEowFaRQUH?p=preview

share|improve this answer
1  
And if the function isn't named foo? Or if ng-click contains a more complex expression? And what's the point of using hasOwnProperty in this case (I'm just curious)? –  zeroflagL Jan 11 at 10:06
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.