Question

我正在努力学习Angular。我创建了一个简单的视图如下：

<!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>

控制器：的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);

问题是，当我点击超链接'选择'超链接时，我看不到任何事件触发。请帮忙。

Answer 1

在Angular中，您的控制器处理与视图的交互。因此，视图中的任何事件都由相应的控制器处理。

视图和控制器通过$scope紧密耦合。因此，必须在$scope上公开任何变量，对象或事件处理程序，才能在视图中访问它们。

由于您正在调用，在您的控制器中定义的showDetail仍然是一个普通的JS函数，而不是在Angular的上下文中。要在视图中使用相同内容，您需要通过$scope公开它。

因此，您的函数应声明如下，

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

Answer 2

而不是var ShowDetail，请尝试使用$scope.ShowDetail。

Answer 3

正如Amar所提到的，使用$scope.ShowDetail代替var并在函数内添加event.preventDefault（）以确保href不会触发。

Angular js ng-click不会触发超链接

3 个答案: