Angular ng-click event not firing from controller binding in Directive template

Question

I have created a simple directive to load a template. Within the template is a binding to a function in the controller that I wanted fired on ng-click.

The directive:

angular
    .module('myApp')
    .directive('someDirective', someDirective);

function someDirective() {
    var directive = {
        templateUrl: 'app/components/some-directive/some-directive.html',
        controller: 'MyCoolController',
        controllerAs: 'vm',
        restrict: 'A',
    };

    return directive;
}

The controller:

angular
    .module('myApp')
    .controller('MyCoolController', MyCoolController);

function MyCoolController() {
    var vm = this;

    function clickMe() {
        alert('clicked!');
    }

    cm.clickMe = clickMe;

}

The template:

<div my-cool-directive>
    <a href="#" ng-click="vm.clickMe()">Click me</a>
</div>

My issue is that the ng-click event is not firing when the a is clicked.

Was wondering about this myself and ended up making a simple plunkr to demonstrate plnkr.co/edit/qQcUPragFYcKIwe3ZLeZ?p=preview — Daniel Lizik
– Daniel Lizik, Commented Dec 6, 2015 at 4:47

Bradley Flood · Accepted Answer · 2015-10-20 01:36:13Z

2

The issue was my lack of understanding how a directive inherits scope. Adding scope: true to the directive map corrects the scope for my use case.

angular
    .module('myApp')
    .directive('someDirective', someDirective);

function someDirective() {
    var directive = {
        templateUrl: 'app/components/some-directive/some-directive.html',
        controller: 'MyCoolController',
        controllerAs: 'vm',
        scope: true, // <-------- Gotcha!
        restrict: 'A',
    };

    return directive;
}

There are 3 different types of scopes for directives:

Shared scope
Inherited scope
Isolated scope

For further information see this post: Understanding scopes in AngularJS custom Directives

answered Oct 20, 2015 at 1:36

Bradley Flood

10.6k3 gold badges49 silver badges43 bronze badges

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

Collectives™ on Stack Overflow

Angular ng-click event not firing from controller binding in Directive template

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related