ng-click在AngularJS中沒有觸發，而onclick做

Question

我想在我的應用程序中使用AngularJS，並且在某種程度上已經成功。

我能夠獲取數據並將其顯示給用戶。我在ng-repeat中有一個按鈕，通過它我想發佈DELETE請求。以下是我的代碼。

<div class="navbar-collapse collapse"> 
    <table class="table table-striped" ng-controller="FetchViewData"> 
     <tr> 
      <td>Name</td> 
      <td>ID</td> 
      <td>Department</td> 
      <td></td> 
     </tr> 
     <tr ng-repeat="d in viewData"> 
      <td>{{d.EmployeeName}}</td> 
      <td>{{d.EmployeeID}}</td> 
      <td>{{d.EmployeeDepartment}}</td> 
      <td> 
       <button class="trashButton" type="button" 
       name="view:_id1:_id2:_id14:_id24:btnDelete" 
       id="view:_id1:_id2:_id14:_id24:btnDelete" 
       ng-click="deleteRecord('{{d['@link'].href}}')"> 
       <img src="/trashicon.gif"></button> 
      </td> 
     </tr> 
    </table> 
</div> 

這是FetchViewData函數，它獲取信息並將其顯示給用戶。

function FetchViewData($scope, $http) { 
    var test_link = "<MY LINK>"; 
    $http.get(test_link).success(function(data) { 
     $scope.viewData = data; 
    }); 
} 

數據被提取並正確顯示。

但是當單擊刪除按鈕時，ng-click="deleteRecord('{{d['@link'].href}}')"中的代碼不會觸發。在Google Chrome的開發者工具中，我可以看到代碼爲{{d['@link'].href}}的代碼生成有效值，但代碼deleteRecord未被觸發。從this question我試圖刪除大括號，只寫d['@link'].href但它不適合我。

當我將ng-click替換爲onclick時，deleteRecord函數被解僱。

function deleteRecord(docURL) { 
    console.log(docURL); 

    $http.delete(docURL); 
} 

但後來我收到下面的錯誤。

Uncaught ReferenceError: $http is not defined 
deleteRecord 
onclick 

我正在使用jQuery 1.10.2和AngularJS v1.0.8。

Answer 1

這裏的FetchViewData是一個控制器，並且在你的html中，你有ng-controller =「FetchViewData」，你告訴它在該控制器的範圍內查看任何角方法和變量。

這意味着，如果您想在點擊時調用某個方法，則需要調用與您的控制器範圍相關的內容。

function FetchViewData($scope, $http) { 
    var test_link = "<MY LINK>"; 
    $http.get(test_link).success(function(data) { 
     $scope.viewData = data; 
    }); 
    $scope.deleteRecord = function(docURL) { 
     console.log(docURL); 

     $http.delete(docURL); 
    } 
} 

這裏，函數存在的範圍，那就是你的內部控制FetchViewData訪問該範圍內的任何HTML，你應該能夠調用你的方法。

當您使用on-click時，它正在工作，因爲您的函數存在於全局命名空間中，這是點擊看起來的位置。角是在確定範圍，讓您的命名空間的清潔很嚴重依賴，有大量的信息在這裏：https://github.com/angular/angular.js/wiki/Understanding-Scopes

Answer 2

的deleteRecord方法應該在當前和正確的範圍

$scope.deleteRecord = function(){ 
.... 

Answer 3

function deleteRecord(docURL) { 
     console.log(docURL); 

     $http.delete(docURL); 
} 

分配應該是

$scope.deleteRecord = function (docURL) { 
     console.log(docURL); 

     $http.delete(docURL); 
} 

編輯： 改變一些HTML和控制器... 。

SEE WORKING DEMO

Answer 4

如前所述，功能應該範圍內創建：

$scope.deleteRecord = function (docURL) { 
     console.log(docURL); 

     $http.delete(docURL); 
} 

要使用該功能，首次下降「{{}}」，因爲您在ng-repeat中使用它。另一個問題是在代碼中使用撇號，在另一個內部有兩個對......我相信你會遇到這個問題。

使用功能，像這樣：

ng-click="deleteRecord(d['@link'].href)" 

祝您好運！

Answer 5

，而不是這個

ng-click="deleteRecord('{{d['@link'].href}}')" 

試試這個

ng-click="deleteRecord(d['@link'].href)" 

你不需要在使用大括號（{{}}）NG單擊

享受...

Answer 6

如果你想用作提交按鈕，設置t YPE到「提交」爲：

<button type="submit" ... 

Answer 7

另一種可能性爲什麼ng-click不火，是你申請的pointer-events:none; CSS樣式的元素。我發現Bootstrap的form-control-feedback類適用於這種風格。所以，儘管它將z-index提高了2，以便該元素在前面進行點擊，但它禁用了鼠標點擊！

所以要小心你的框架如何相互作用。