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

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使用$parse服务来评估expressionin ng-click="expression".

角度表达式与常规javascript代码不同.$parse使用字符串解析来解释表达式,它将对变量,函数和对象的访问限制为对象的属性$scope,或者$parent恰好在原型继承链上可用的任何范围对象的属性.

所以在理论上你可以获得像这样的全局变量:

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

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

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

或者你可以这样做一次:

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

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

...但是除了可能用于调试目的之外,有充分的理由永远不会做上述任何一种情况.这并不是说装饰$rootScope总是一个坏主意,至少有一个特殊情况,装饰角度的范围可以完成一些非常难以做到的事情.

Answer 3

你不能在ng指令中执行那种代码.他们在您的本地范围内查找内容.

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

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

然后在你的模板中

ng-click="alert()"

它将正确执行javascript警报.