Question

显然有一些基本的我还没有理解。

我试图在Angular Ui.Bootstrap中创建Modal模块的用户但是我发现我的点击没有激活open()函数 - 所以把它煮成一个非常简单的测试用例，如下所示，我不是当ng-click指向一个函数（alert或console.log）时看到任何调用，但是当ng-click指向某个只是表达式的东西时它会工作

为什么第一个例子中没有调用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/

Answer 1

ng-click适用于当前范围内的函数（例如$scope.alert = window.alert将解决无法在那里发出警报的问题）或角度表达式。它看起来像angular不允许你在那里使用全局范围方法（它可能在当前$scope中查找它们，它们从中缺失）。

Answer 2

ng-click需要angular expression。在内部，angular使用$parse服务来评估expression中的ng-click="expression"。

角度表达式与常规javascript代码不同。 $parse使用字符串解析来解释表达式，它将对变量，函数和对象的访问限制为$scope对象的属性或任何$parent范围对象的属性恰好在prototypical inheritance chain上可以使用。

所以理论上你可以像这样访问 globals ：

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

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

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

或者你可以这样做一次：

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

然后，原型继承自$rootScope的任何范围也可以访问窗口和警报。

...但是除了可能用于调试之外，有充分的理由永远不会做上述任何一种情况。这并不是说装饰$rootScope总是一个坏主意，至少有one special case where decorating angular's scope can accomplish something that would be very difficult to do otherwise。

Answer 3

您无法在ng指令中执行这种代码。他们在您的本地范围内寻找内容。

如果您在控制器中执行此操作：

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

然后在你的模板中

ng-click="alert()"

它会正确执行javascript警报。

Answer 4

要实现这一目标，您必须在alert上定义$scope：

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

文档中的相关内容：

AngularJS限制从内部访问Window对象表达式因为它是执行任意Javascript的已知方法代码。

https://docs.angularjs.org/error/ $解析/ isecwindow

Answer 5

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>

为什么ng-click在case-1中不起作用，但在case-3中起作用？

5 个答案: