Fla*_*ape 4 javascript onclick angularjs
为什么这个简单的ng-click示例不起作用？我已经在生产中使用角几个月了,但是这个笨蛋让我感到困惑.
http://plnkr.co/edit/9Rp5JD?p=preview
如果你注意到,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>
没有孤立的范围,根本没有指令......只是一个div.您可以删除onclick ....其他警报永远不会触发.我确定无论问题是什么,我都会变得太近视而无法找到它.
其余的无聊配置:
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;
});
整个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="angular.js@1.2.x" 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>
Angular的表达式不使用该eval函数,因此除非您已alert在作用域链中定义了一个函数,否则它将无法执行.
https://docs.angularjs.org/guide/expression#context
Angular不使用JavaScript的eval()来计算表达式.相反,Angular的$ parse服务处理这些表达式.
Angular表达式无法访问全局变量,如窗口,文档或位置.这种限制是故意的.它可以防止意外访问全局状态 - 这是微妙错误的常见来源.
而是在表达式调用的函数中使用$ window和$ location等服务.这些服务提供对全局变量的可模拟访问.
所以你必须在你的范围上定义这样一个函数:
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>alert在控制器定义中添加了一个属性:
app.controller('MainCtrl', function($scope) {
var that = this;
$scope.showTest = true;
$scope.alert = function(msg) {
alert(msg);
};
});
我认为问题在于该ng-click指令会自动解释你在控制器对象范围内放置的内容.因此,如果控制器没有alert属性,则不会发生任何事情.
| 归档时间： |
|
| 查看次数： |
9707 次 |
| 最近记录： |