为什么在案例1中ng-click不起作用,但是在case-3中起作用?

显然有一些根本性的问题还没有得到理解。

我试图让Angal Ui.Bootstrap中的Modal模块的用户,但即时通讯发现,我的点击没有激活open()函数 – 所以把它煮成一个非常简单的testing用例,如下所示,即使没有看到任何调用ng-click指向一个函数(alert或console.log),但是当ng-click指向某个只是expression式的东西

为什么在第一个例子中没有调用alert

 <div data-ng-app> <button data-ng-click="alert('Message 1');"> ngClick -- not working, why not? </button> <button onclick="alert('Message 2');"> Plain onclick </button> <button data-ng-click="count = (count + 1)"> But this works, why ??? </button> count: {{count}} </div> 

http://jsfiddle.net/H2wft/1/

ng-click意味着与当前作用域中的一个函数(例如$scope.alert = window.alert可以解决无法警告的问题)或一个angular度expression式一起使用。 它看起来像angular度不允许你在那里使用全局作用域方法(它可能会查找它们在当前的$scope ,他们是从它们丢失)。

ng-click需要一个angular度expression式 。 在内部,angular使用$parse服务来评估ng-click="expression"

angular度expression式不同于常规的JavaScript代码。 $parse使用stringparsing来解释expression式,它将您对variables,函数和对象的访问限制为那些是$scope对象的属性的属性,或者是任何$parent范围对象的属性,这些对象恰好在原型inheritance链 。

所以理论上你可以获得这样的全局variables

  $scope.window = window; $scope.alert = alert; 

…然后在你的模板中执行ng-click="window.alert('hello!')"

…或… ng-click="alert('hello!')"


或者你可以只做一次:

  $rootScope.window = window; $rootScope.alert = alert; 

然后,从$rootScope原型inheritance的任何范围也将有权访问窗口和警报。


…但有充分的理由永远不要做上述任何一种,除了可能的debugging目的。 这并不是说,装饰$rootScope总是一个坏主意,至less有一个特殊情况,装饰angular度的范围可以完成一些很难做到的事情 。

你不能在ng指令中执行这种types的代码。 他们在本地范围内寻找内容。

如果你在你的控制器中这样做:

 $scope.alert = function(){ alert('alerted!'); }; 

然后在你的模板中

 ng-click="alert()" 

它会正确执行JavaScript警报。

为了达到这个目的,你必须在$scope定义alert

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

相关文件:

AngularJS限制从expression式中访问Window对象,因为它是执行任意Javascript代码的已知方法。

https://docs.angularjs.org/error/ $ parse / isecwindow

https://docs.angularjs.org/guide/expression

  <div class="example2" ng-controller="ExampleController"> Name: <input ng-model="name" type="text"/> <button ng-click="greet()">Greet</button> <button ng-click="window.alert('Should not see me')">Won't greet</button> </div>