Question

为什么这个简单的ng-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>

没有孤立的范围，根本没有指令......只是一个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>

Answer 1

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');
  };
});

<强>样本

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>

Answer 2

在控制器定义中添加了alert属性：

app.controller('MainCtrl', function($scope) { 
  var that = this;

  $scope.showTest = true;

  $scope.alert = function(msg) {
    alert(msg);
  };
});

我认为问题是ng-click指令会自动解释你在控制器对象范围内放置的内容。因此，如果控制器没有alert属性，则不会发生任何事情。

为什么ng-click不起作用？

2 个答案: