AngularJs directives call link function on click

Question

I am wondering how to specify when the link function for a directive should be called.

Currently I have the following code:

<my-directive username="abc"></my-directive>

module.directive("myDirective", [{
  restrict: "A",
  link($scope, element, others) {
    //if element.clicked() {
    //  console.log("you clicked me");
    //}
  }
}]);

As you can see I have commented out pseudo-ish code of what I would like to do and I have seen that it's possible to do something like element.onClick = function() {}. But this still doesn't seem to be called when the element is clicked.

Thanks

RWAM · Accepted Answer · 2016-09-08 12:33:29Z

2

Try this:

element.on('click', function() {});

Angular uses build in jQuery Lite, so you can use this.

edited Sep 8, 2016 at 12:33

answered Sep 8, 2016 at 12:23

RWAM

7,0583 gold badges37 silver badges48 bronze badges

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

2 Comments

RWAM Over a year ago

You're right, that's my fault. I've edited my answer.

RWAM Over a year ago

@SwimmingG thanks, please don't forget to mark the answer as your solution ;)

rejo · Accepted Answer · 2016-09-08 12:32:52Z

Try this

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {

  $scope.abc = 'abc';
    
});



app.directive('myDirective', function() {
  return {
    restrict: 'E',
    scope: {
      username: '='
    },
    link:link,
    template: '<div>Click Here</div>'
  };
  function link(scope,elem,others){
    
     elem.bind('click', function() {
      console.log('on click');
    });  
    
  }
});

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link href="style.css" rel="stylesheet" />
    <script data-semver="1.4.9" src="https://code.angularjs.org/1.4.12/angular.js" data-require="[email protected]"></script>
    <script src="app.js"></script>
  </head>

   <body ng-app="plunker" ng-controller="MainCtrl">
  <my-directive username="abc"></my-directive>
  </body>

Ameer Hamza · Accepted Answer · 2016-09-08 12:48:12Z

you can also try like this!

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {

  $scope.abc = 'abc';
    
});



app.directive('myDirective', function() {
  return {
    restrict: 'E',
    scope: {
      username: '='
    },
    link:link,
    template: '<div ng-click="click()">Click Here</div>'
  };
  function link(scope,elem,others){
    
   scope.click = function() {
        console.log('on click', scope.username);       
   }
  }
});

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link href="style.css" rel="stylesheet" />
    <script data-semver="1.4.9" src="https://code.angularjs.org/1.4.12/angular.js" data-require="[email protected]"></script>
    <script src="app.js"></script>
  </head>

   <body ng-app="plunker" ng-controller="MainCtrl">
  <my-directive username="abc"></my-directive>
  </body>

Collectives™ on Stack Overflow

AngularJs directives call link function on click

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related