為什么ng-click不起作用？
[英]Why is ng-click not working?
問題描述
為什么這個簡單的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>
2 個解決方案
解決方案1
7 已采納 2014-12-17 23:17:14
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>
解決方案2
5 2014-12-17 23:15:23
為控制器定義添加了alert屬性：
app.controller('MainCtrl', function($scope) {
var that = this;
$scope.showTest = true;
$scope.alert = function(msg) {
alert(msg);
};
});
我認為問題在於ng-click指令會自動解釋你在控制器對象范圍內放置的內容。 因此，如果控制器沒有alert屬性，則不會發生任何事情。
為什么ng-click不起作用？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.