Define button click listener within isolate scope in angularjs

Question

I want to create a directive as a component, such that its not dependent on any controllers as such.

I have been trying to find out how to get a button click listener defined. But couldnt suceed yet.

angular.module('nestedDirectives', [])
.directive("parent", function () {
    function linker(scope, element, attribute, controllers) {
        console.log("linker called");
        element.on("click", function clicked(event) {
            console.log("clicked");
            console.dir(this);
            element.prepend("<h1>Hello</h1>");
        });
    }

    return {
        restrict: 'A',
        template: '<div><h5>An Item</h5><button ng-click="clicked()">Click Me</button></div>',
        link: linker,
        scope: {}
    }
})

In the template, no matter what i click the element.on("click") would get called. I want to call a clicked() method when button is clicked.

Here is the Plunker for the same.

yvesmancera · Accepted Answer · 2015-07-30 18:37:29Z

1

The link function gets the scope (an isolated scope in your case) as the first argument, so you can do something like:

.directive("parent", function () {
  function linker(scope, element, attribute, controllers) {
    console.log("linker called");
    //add the "clicked" function to your scope so you can reference with ng-click="clicked" in your template
    scope.clicked = function() {
      console.log("clicked");
      console.dir(this);
      element.prepend("<h1>Hello</h1>");
    };
  }

  return {
    restrict: 'A',
    template: '<div><h5>An Item</h5><button ng-click="clicked()">Click Me</button></div>',
    link: linker,
    scope: {}
  };
});

Here is your updated plunkr http://plnkr.co/edit/7mlcSB4phPO5EdEQqTj0

answered Jul 30, 2015 at 18:37

yvesmancera

2,9255 gold badges26 silver badges33 bronze badges

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

1 Comment

jsbisht Over a year ago

Thanks. Using scope didn't strike me at all.

Collectives™ on Stack Overflow

Define button click listener within isolate scope in angularjs

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related