javascript 为什么 ng-click 不起作用？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27536484/
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
Why is ng-click not working?
提问by FlavorScape
Why on earth wont this simple ng-click example work? I've been using angular for months in production, but this plunker is baffling me.
为什么这个简单的 ng-click 示例不起作用？我已经在生产中使用 angular 几个月了，但是这个笨蛋让我感到困惑。
http://plnkr.co/edit/9Rp5JD?p=preview
http://plnkr.co/edit/9Rp5JD?p=preview
If you notice, the ng-show properties are working... why isn't the click? It always alerts the default and not the angular click.
如果您注意到，ng-show 属性正在起作用……为什么点击不起作用？它总是提醒默认值而不是角度点击。
<div ng-show="showTest" ng-click="alert('angular click')" onclick="alert('default click')">Default or angular click?</div>
<div ng-show="dontShowMeIsNotDefinedSoIWontShow" >Not showing me, I know angular is working!</div>
there's no isolated scope, no directive at all... just a div. You can remove the onclick.... the other alert never fires. I'm sure whatever the problem is, I've become too myopic to find it.
没有孤立的作用域，根本没有指令……只是一个 div。您可以删除 onclick.... 另一个警报永远不会触发。我敢肯定，无论问题是什么，我都太近视了，无法找到它。
the rest of the boring config:
其余无聊的配置：
angular.module('plunker', []);
var app = angular.module('plunker', [
'plunker'
]);
app.config( function( ) {
'use strict';
});
app.controller('MainCtrl', function($scope) {
var that = this;
$scope.showTest = true;
});
the whole html:
整个html：
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link data-require="bootstrap-css@*" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="[email protected]" src="https://code.angularjs.org/1.2.6/angular.js" data-semver="1.2.25"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl as vm">
<br/><br/>
<div ng-show="showTest" ng-click="alert('angular click')" onclick="alert('default click')">Default or angular click?</div>
<div ng-show="dontShowMeIsNotDefinedSoIWontShow" >Not showing me, I know angular is working!</div>
</html>
回答by Patrick Evans
Angular's expressions do not use the evalfunction so unless you have defined a function named alertin your scope chain somewhere it will not execute.
Angular 的表达式不使用该eval函数，因此除非您alert在作用域链中的某处定义了一个函数，否则它不会执行。
https://docs.angularjs.org/guide/expression#context
Angular does not use JavaScript's eval() to evaluate expressions. Instead Angular's $parse service processes these expressions.
Angular expressions do not have access to global variables like window, document or location. This restriction is intentional. It prevents accidental access to the global state – a common source of subtle bugs.
Instead use services like $window and $location in functions called from expressions. Such services provide mockable access to globals.
https://docs.angularjs.org/guide/expression#context
Angular 不使用 JavaScript 的 eval() 来计算表达式。相反，Angular 的 $parse 服务会处理这些表达式。
Angular 表达式无权访问全局变量，如窗口、文档或位置。这个限制是有意的。它可以防止意外访问全局状态——这是一个常见的微妙错误的来源。
而是在从表达式调用的函数中使用 $window 和 $location 等服务。此类服务提供对全局变量的可模拟访问。
So you would have to define such a function on your scope:
所以你必须在你的范围内定义这样一个函数：
app.controller('MainCtrl', function($scope,$window) {
var that = this;
$scope.showTest = true;
$scope.alert = function() {
$window.alert('angular click');
};
});
DEMO
演示
angular.module('plunker', []);
var app = angular.module('plunker', [
'plunker'
]);
app.config( function( ) {
'use strict';
});
app.controller('MainCtrl', function($scope,$window) {
var that = this;
$scope.showTest = true;
$scope.alert = function(text){
$window.alert(text);
};
});<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="plunker" ng-controller="MainCtrl">
<div ng-show="showTest" ng-click="alert('angular click')" onclick="alert('default click')">Default or angular click?</div>
<div ng-show="dontShowMeIsNotDefinedSoIWontShow" >Not showing me, I know angular is working!</div>
</div>回答by rchang
Added an alertattribute to your controller definition:
alert向您的控制器定义添加了一个属性：
app.controller('MainCtrl', function($scope) {
var that = this;
$scope.showTest = true;
$scope.alert = function(msg) {
alert(msg);
};
});
I think the issue is that the ng-clickdirective will automatically interpret whatever you put inside in the scope of the controller object. So if the controller doesn't have an alertattribute, nothing happens.
我认为问题在于该ng-click指令将自动解释您放入控制器对象范围内的任何内容。因此，如果控制器没有alert属性，则什么也不会发生。
