Angular js ng-click不會觸發超鏈接
[英]Angular js ng-click not firing for hyperlink
問題描述
我想學習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);
問題是，當我點擊超鏈接'選擇'超鏈接時，我沒有看到任何事件觸發。 請幫忙。
3 個解決方案
解決方案1
2 2015-11-02 22:56:12
在Angular中，您的控制器處理與視圖的交互。 因此，視圖中的任何事件都由相應的控制器處理。
視圖和控制器通過$scope緊密耦合。 因此，必須在$scope上公開任何變量，對象或事件處理程序，以便在視圖中訪問它們。
因為你正在調用，所以在你的控制器中定義的showDetail仍然是一個普通的JS函數，而不是在Angular的上下文中。 要在視圖中使用相同的內容，您需要通過$scope公開它。
因此，您的函數應聲明如下，
$scope.showDetail = function() {
// your logic goes here
}
解決方案2
1 已采納 2015-11-02 22:43:16
而不是var ShowDetail ，嘗試使用$scope.ShowDetail 。
解決方案3
0 2015-11-02 22:53:14
正如Amar所提到的，使用$scope.ShowDetail代替var並在函數內添加event.preventDefault（）以確保href不會觸發。
角Js ng單擊不觸發？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.