2

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');
    };

});
devwannabe
  • 3,160
  • 8
  • 42
  • 79

2 Answers2

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

jake
  • 1,027
  • 8
  • 9
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>
Sujith S
  • 555
  • 5
  • 8