为什么在案例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>