Angular js ng-click not firing for hyperlink

Question

Im trying to learn Angular. I created a simple view as follows:

<!DOCTYPE html>
<html ng-app="MyApp">

  <head>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="MyCtrl">
   <div>
     <table ng-repeat="d in Details">
       <tr>
         <td>{{d.Name}}</td>
         <td>{{d.Salary}}</td>
         <td><a href="#" ng-click="ShowDetail(d)">Select</a></td>
       </tr>
     </table>
   </div>

  </body>

</html>

Controller:script.js

// Code goes here

    var MyModule=angular.module("MyApp",[]);

    var MyCtrl=function($scope){

      var Details=[
        {Name:'XXXX',Salary:40000},
        {Name:'YYYY',Salary:50000},
        {Name:'ZZZZ',Salary:60000},
        {Name:'AAAA',Salary:70000}
        ];

      $scope.Details=Details;

      var ShowDetail=function(detail){
        alert("You selected "+detail.Name+"Salary is "+detail.Salary);
      };
    }
MyModule.controller("MyCtrl",MyCtrl);

Problem is when I click on the hyperlink 'Select' hyperlink I dont see any event firing. Please help.

How do you know if it being called? Did you place a breakpoint? I suspect that it is called, but alert is in window scope, which is not available by default. — Chet
– Chet, Commented Nov 2, 2015 at 22:44

ExpectoPatronum · Accepted Answer · 2015-11-02 22:56:12Z

2

In Angular, your controller handles the interaction with view. So any events in your view is handled by the respective controller.

The view and controller are tightly coupled to each other via $scope. Thus, any variables, objects or event handlers must be exposed on $scope in order to access them in your view.

Since you are calling, showDetail, which is defined in your controller, is still a normal JS function, and not in the context of Angular. To use the same in your view, you need to expose it through $scope.

Thus your function should be declared as follows,

 $scope.showDetail = function() {
   // your logic goes here
  }

answered Nov 2, 2015 at 22:56

ExpectoPatronum

5074 silver badges14 bronze badges

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

Comments

Amar Syla · Accepted Answer · 2015-11-02 22:43:16Z

1

Instead of var ShowDetail, try using $scope.ShowDetail.

answered Nov 2, 2015 at 22:43

Amar Syla

3,6533 gold badges33 silver badges72 bronze badges

Comments

Giri · Accepted Answer · 2015-11-02 22:53:14Z

0

As Amar mentioned, use $scope.ShowDetail instead of var and add event.preventDefault () inside the function to make sure href doesnt fire.

answered Nov 2, 2015 at 22:53

Giri

5652 silver badges9 bronze badges

Collectives™ on Stack Overflow

Angular js ng-click not firing for hyperlink

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related