Angularjs Custom Directive ng-click not working

Question

i've created a custom directive in angularjs:

directives.directive('myTop',function($compile) {
return {
    restrict: 'E',
    templateUrl: 'views/header.html',
}
})

Directive's code:

<div class="my-header">
<button ng-click="alert('x')" class="fa fa-chevron-left"></button>
<h1>SpeakZ</h1>
</div>

for some reason, ng-click doesen't trigger.

I searched over the internet and found that compile / link is the solution for this problem, but I can't seem to reach a working solution.

I am not using jquery..

alert is not working inside ng-click instead it will seach for $scope.alert function in the scope — Kalhan
– Kalhan, Commented Dec 12, 2014 at 9:54
originally I tried putting: $location.path('/') inside ng-click.. dosen't work — Yonatan Naxon
– Yonatan Naxon, Commented Dec 12, 2014 at 9:56

Idkt · Accepted Answer · 2014-12-12 10:01:34Z

15

You'll need to add a link function to the directive definition for this to work. So basically,

var app = angular.module("myApp", [])

app.directive('myTop',function() {
return {
    restrict: 'E',
    template: '<button ng-click="clickFunc()">CLICK</button>',
    link: function (scope) {
        scope.clickFunc = function () {
            alert('Hello, world!');
        };
    }
}
})

And the html:

<div ng-app="myApp">
    <my-top></my-top>
</div>

And here's the fiddle: http://jsfiddle.net/4otpd8ah/

answered Dec 12, 2014 at 10:01

Idkt

3,0034 gold badges29 silver badges48 bronze badges

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

4 Comments

Idkt Over a year ago

What do you mean by native functions?

Yonatan Naxon Over a year ago

originally I tried putting: $location.path('/') inside ng-click.. doesn't work

Idkt Over a year ago

That will not work. You should have a function defined in the scope of the directive (in the case above its scope.clickFunc) which does something depending on what you'd need. $location will also need to be injected into the directive.

pavan kumar Over a year ago

That worked for me but how can i attach a function that is already defined in the scope??

VK321 · Accepted Answer · 2016-04-12 03:43:36Z

1

Either use link as answered by @Ashesh or just simply add scope. If you set scope false you will not have isolated scope and click will work on directive.

directives.directive('myTop',function($compile) {
return {
   restrict: 'EA',
   scope: false,
   templateUrl: 'views/header.html',
  }
})

answered Apr 12, 2016 at 3:43

VK321

6,0135 gold badges48 silver badges53 bronze badges

Collectives™ on Stack Overflow

Angularjs Custom Directive ng-click not working

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related