Angular-Foundation and ng-click not working on tag

Question

Spent the whole day trying to figure this simple issue but no luck. I added ng-click to < a > tag but it's not calling the function. If I put the ng-click on a button, it works.

I've tried the following with no success.

<li><a href="#" ng-click="signout()">Sign Out</a></li>
<li><a href="" ng-click="signout()">Sign Out</a></li>
<li><a href ng-click="signout()">Sign Out</a></li>
<li><a ng-click="signout()">Sign Out</a></li>
<li ng-click="signout()"><a href="#">Sign Out</a></li>

I noticed though that when I click it, it adds the class ng-click-active

like this

<a href="#" ng-click="signout()" class="ng-click-active">Sign Out</a>

or like this

<li ng-click="signout()" class="ng-click-active"><a href="#">Sign Out</a></li>

I also noticed that ng-click on < a > tag will work if I execute this in the chrome dev tools console

$(document).foundation();

I'm out of ideas!

Update: I'm adding the js for the signout function

angular.module('myapp')
    .controller('NavbarCtrl', function ($scope, $state, principal) {

    $scope.signout = function() {
        console.log('*******************');
        principal.authenticate(null);
        $state.go('login');
    };

});

did you try [these ideas](http://stackoverflow.com/questions/14939385/href-overrides-ng-click-in-angular-js)? — sfletche, Apr 29 '15 at 04:37
This is the js, it's very simple - http://pastebin.com/2HunhN8E — devwannabe, Apr 29 '15 at 04:38
oh @sfletche, that's the one I followed today with no luck. If you look at my code above, I followed the suggestions written on that link. Like what I said, if it's not on the list, it works. — devwannabe, Apr 29 '15 at 04:40
can you create a basic plunkr. it would give a better picture. — batmaniac7, Apr 29 '15 at 04:45

score 1 · Answer 1 · answered Apr 29 '15 at 04:43

1

Make sure you've included your ng-app and ng-controller directives in your HTML, like this:

<!-- Reference ng-app -->
<html ng-app="myApp">

  <head>
    <script data-require="angular.js@1.3.15" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js"></script>
  </head>

  <!-- Reference ng-controller -->
  <body ng-controller="mainCtrl">
    <h1>ng-click</h1>

    <a href="#" ng-click="signout()">Sign Out</a>
  </body>

</html>

Then make sure to add a reference to the $signout function on your controller.

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

app.controller('mainCtrl', function($scope){
    $scope.signout = function(){
      alert("You clicked Sign Out"); 
    }
  });

Here's a link to a Plunker that shows how can you implement ng-click on an tag.

http://plnkr.co/edit/NrF6ay06mG7lJ5OvRP3F?p=preview

answered Apr 29 '15 at 04:43

jake

1,027
8
9

Jake, I don't want to say this but looks like you didn't read my post well. – devwannabe Apr 29 '15 at 04:49
The example I provided shows how to add an ng-click on an tag. The only reason it wouldn't work is if you haven't defined the ng-app directive, ng-controller directive, or the function on your scope. – jake Apr 29 '15 at 04:53
I wrote this above -> "If I put the ng-click on a button, it works." – devwannabe Apr 29 '15 at 05:15

score 0 · Answer 2 · answered Feb 02 '17 at 05:32

0

Use "button" or "div" tag instead of "a" tag if you don't need a url.

<li><button ng-click="signout()">Sign Out</button></li>
<li><div ng-click="signout()">Sign Out</div></li>

answered Feb 02 '17 at 05:32

Sujith S

555
5
8

Angular-Foundation and ng-click not working on tag

2 Answers2