Angular Directives(ngclick not firing)

Question

I'm new to Angular and I have been working on small project. I have a question about directives and ng-click.

Every time I click on the div tag to setoff the setlock() function it never fires. Could this be caused by my directive and controller being in separate files? And is there a way to make this work using link: ?

Thanks.

Directive.js

(function(){
'use strict';

angular
    .module('widget.ballslot')
    .directive('ballSlot', ballSlot);

function ballSlot(){

    var directive = {
        restrict: 'E',
        scope: true,
        templateUrl: 'app/widgets/ballslot.html',
        controller: 'Ballslot',
    }
    return directive;
}
})();

Controller.js

(function(){
'use strict';

angular
    .module('widget.ballslot')
    .controller('Ballslot', Ballslot);

function Ballslot() {
    var vm = this;

    vm.locked = true;

    function setlock() {
        vm.locked = !vm.locked;
    };

};
})();

page.html

<div data-ng-controller='Ballslot as vm' class='ball'>
<div id='background-purple' ng-click='vm.setlock()'>
   <i class="fa fa-lock" ng-hide="vm.locked"> </i>
   <i class="fa fa-unlock-alt" ng-show="vm.locked"></i>     
</div>
</div>

you should be careful here with your directive definition. It appears that you have a workable answer, but your code has another subtle issue. you have actually declared your controller twice, once in the directive definition and a second time within the HTML. It's not really clear where you plan to use the directive (you aren't using it in this sample code), but when you do use the directive, it likely won't act the way you expect. — Claies
– Claies, Commented Jan 24, 2016 at 6:39
So I am creating it twice by binding it in my Custom directive and defining my directives controller: 'Ballslot'? I'm plugging this into a index.html which calls a few pages that generate a different amount of ballslots. So one could have 3 slots and another could have 10 — Msbart
– Msbart, Commented Jan 25, 2016 at 2:06

Chanthu · Accepted Answer · 2016-01-24 06:38:12Z

2

Looks like the setLock function is not accessible to html. This is because it's a private function and not exposed through vm.

Try changing

function setlock() {
    vm.locked = !vm.locked;
};

TO

vm.setlock = function() {
    vm.locked = !vm.locked;
};

edited Jan 24, 2016 at 6:38

answered Jan 24, 2016 at 5:59

Chanthu

1,7941 gold badge15 silver badges23 bronze badges

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

2 Comments

Brian Baker Over a year ago

Close but vm.setlock = function() { vm.locked = !vm.locked; }; would work better. :)

Msbart Over a year ago

Brian Baker thank you, that implementation worked. Thanks both on the clarification and answers. Now how should I go about this since your clarification was correct but Brian's code was right?

Collectives™ on Stack Overflow

Angular Directives(ngclick not firing)

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related