jQuery ng-click 不会在 AngularJS 中触发，而 onclick 会触发
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19512572/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
ng-click not firing in AngularJS while onclick does
提问by Naveen
I am trying to use AngularJS in my application and have been successful to some extent.
我正在尝试在我的应用程序中使用 AngularJS，并且在某种程度上取得了成功。
I am able to fetch data and display it to the user. And I have a button in ng-repeatvia which I want to post DELETE request. Below is my code which does it.
我能够获取数据并将其显示给用户。我有一个按钮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>
This is the FetchViewDatafunction which fetches the information and displays it to the user.
这是FetchViewData获取信息并将其显示给用户的函数。
function FetchViewData($scope, $http) {
var test_link = "<MY LINK>";
$http.get(test_link).success( function(data) {
$scope.viewData = data;
});
}
The data is fetched and properly displayed.
数据被获取并正确显示。
But the code in ng-click="deleteRecord('{{d['@link'].href}}')"does not fire when delete button is clicked. In Google Chrome's developer tools I can see valid values are generated for code {{d['@link'].href}}but the code deleteRecorddoes not get fired. From this questionI tried removing the braces and writing only d['@link'].hrefbut it didn't work for me.
但是ng-click="deleteRecord('{{d['@link'].href}}')"单击删除按钮时不会触发中的代码。在 Google Chrome 的开发人员工具中，我可以看到为代码生成了有效值，{{d['@link'].href}}但代码deleteRecord没有被触发。从这个问题中，我尝试删除大括号并只写，d['@link'].href但它对我不起作用。
When I replace ng-clickwith onclickthe deleteRecordfunction gets fired.
当我更换ng-click使用onclick的deleteRecord功能被炒鱿鱼。
function deleteRecord(docURL) {
console.log(docURL);
$http.delete(docURL);
}
But then I receive the below error.
但后来我收到以下错误。
Uncaught ReferenceError: $http is not defined
deleteRecord
onclick
I am using jQuery 1.10.2 and AngularJS v1.0.8.
我使用 jQuery 1.10.2 和 AngularJS v1.0.8。
回答by B Cotter
FetchViewData here is a controller, and in your html, where you have ng-controller="FetchViewData", you are telling it to look within that controller's scope for any angular methods and variables.
这里的 FetchViewData 是一个控制器，在你的 html 中，你有 ng-controller="FetchViewData"，你告诉它在该控制器的范围内查找任何角度方法和变量。
That means, if you want to call a method on click, it needs to be calling something attached to your controller's scope.
这意味着，如果你想在点击时调用一个方法，它需要调用一些附加到你的控制器范围的东西。
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);
}
}
Here, the function exists on the scope, and any html that is inside your FetchViewData Controller has access to that scope, and you should be able to call your methods.
在这里，该函数存在于作用域中，您的 FetchViewData 控制器内的任何 html 都可以访问该作用域，并且您应该能够调用您的方法。
It's working when you use on-click because your function exists in the global namespace, which is where on-click is going to look. Angular is very heavily reliant on scoping to keep your namespaces clean, there's lots of info here: https://github.com/angular/angular.js/wiki/Understanding-Scopes
当您使用 on-click 时它会起作用，因为您的函数存在于全局命名空间中，这是 on-click 将要查看的位置。Angular 非常依赖作用域来保持命名空间干净，这里有很多信息：https: //github.com/angular/angular.js/wiki/Understanding-Scopes
回答by Rajsekhar Das
INSTEAD of this
取而代之的是
ng-click="deleteRecord('{{d['@link'].href}}')"
TRY this
尝试这个
ng-click="deleteRecord(d['@link'].href)"
You don't need to use curly brackets ({{}}) in the ng-click
您不需要在 ng-click 中使用大括号 ({{}})
ENJOY...
请享用...
回答by Nitish Kumar
function deleteRecord(docURL) {
console.log(docURL);
$http.delete(docURL);
}
It should be
它应该是
$scope.deleteRecord = function (docURL) {
console.log(docURL);
$http.delete(docURL);
}
EDIT:change something in html and controller ....
编辑：更改 html 和控制器中的某些内容....
回答by subZero
The deleteRecordmethod should be assigned in the current and correct scope
该deleteRecord方法应该在当前和正确的范围内分配
$scope.deleteRecord = function(){
....
回答by Shabi_669
As mentioned, the function should be created inside the scope:
如前所述，该函数应该在范围内创建：
$scope.deleteRecord = function (docURL) {
console.log(docURL);
$http.delete(docURL);
}
To use the function, first drop the "{{ }}" since you are using it from inside an ng-repeat. Another issue is the use of apostrophe in your code, you have two pairs one inside the other... well I am sure you get the problem with that.
要使用该函数，请先删除“{{ }}”，因为您是从 ng-repeat 中使用它的。另一个问题是在你的代码中使用撇号，你有两对一对......我相信你会遇到这个问题。
Use the function like so:
像这样使用函数：
ng-click="deleteRecord(d['@link'].href)"
Best of luck !
祝你好运！
回答by frank
If you want to use as a submit button the set the type to 'submit' as:
如果您想用作提交按钮，请将类型设置为“提交”：
<button type="submit" ...
回答by Zarepheth
Another possibility for why ng-clickdoes not fire, is that you are apply a CSS style of pointer-events:none;to the element. I discovered that Bootstrap's form-control-feedbackclass applies that style. So, even though it raises the z-indexby 2 so that the element is in front for clicking, it disables mouse-clicks!
为什么ng-click不触发的另一种可能性是您pointer-events:none;对元素应用了 CSS 样式。我发现 Bootstrap 的form-control-feedback类应用了这种风格。因此，即使它提高了z-index2 以便元素在前面进行单击，它也会禁用鼠标单击！
So be careful how your frameworks interact.
所以要小心你的框架如何交互。
