CODEWITHSUNDEEP
javascriptangularjs
Eric Chen
Eric Chen

Reputation: 15

AngularJS - ng-click doesn't fire my controller function

I am trying to call a function when my button is clicked. This code should work, but it doesn't fire the function I defined in my controller.

The code compile fine as show in the console, any idea?
Thanks!

This is my code:

  <html lang="en" ng-app="myApp" >
   <head>
   <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Ristorante Con Fusion</title>
    <!-- Bootstrap -->
    <script src="js/jquery-1.12.0.min.js"></script>
    <script src="js/angular.js"></script>
    <link href="css/bootstrap.min.css" rel="stylesheet">
   <link href="css/mystyles.css" rel="stylesheet">


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

app.controller('navCtrl', function($scope) {


    $scope.select=function () {
        alert('hi');
    };
});
</script>
</head>
<body>

   <nav  id="mynav"class= "navbar navbar-inverse " role="navigation" ng-controller="navCtrl" > 
     <div class="container">

       <ul class="nav navbar-nav color-white ">
        <li  > 
          <a id="home" ng-click="navCtrl.select()"href="#" >home</a></li>
            <li >
              <a id="1" href="#" ng-click="navCtrl.select() ">About</a></li>
            <li >
               <a id="2" href="#" ng-click="navCtrl.select() ">Contact</a></li>
      </ul>


     </div>
   </nav>
</body>

Upvotes: 0

Views: 1134

Answers (2)

Kunal Kakkad
Kunal Kakkad

Reputation: 653

Just modify it as follows:

<ul class="nav navbar-nav color-white ">
    <li  > 
       <a id="home" ng-click="select()">home</a></li>
     <li >
       <a id="1" href="#" ng-click="select()">About</a></li>
     <li >
       <a id="2" href="#" ng-click="select()">Contact</a></li>
</ul>

Hope it works.!

Upvotes: 0

Martijn
Martijn

Reputation: 24789

You don't need to specify 'navCtrl' in your HTML. Just call 'ng-click=select()'. If you had used controller-as='navCtrl' then you need to use navCtrl.select.

Upvotes: 3

Related Questions