Javascript &引用；“鬼魂”；ng点击功能

就在我认为我很了解Angular的时候，我遇到了这样的情况：

有人能解释一下这是怎么可能的吗

演示：

HTML

<div ng-controller="MyCtrl">

  <button ng-click="WTF" ng-bind="labelText()"></button>

  <div ng-show="showMe()">
    Hello, World!
  </div>

</div>

---

如果您尚未发现问题：该按钮具有一个不存在的

ng click

功能，但是当您单击该按钮时，div切换，按钮值更改。

发生这种情况是因为您使用了

ng click

功能，它在对

ng click

指令中给出的表达式求值后运行摘要循环。结果所有的

watcher

函数都会被评估，这就是为什么每次单击时都会切换值

---

幕后当您对表达式使用

ng show

指令时，angular将该表达式放在

watcher

数组中，该数组位于

$scope

对象下。您可以在

$scope.$$watchers

对象中看到

watcher

对象的集合。

发生这种情况是因为您使用了

ng click

函数，该函数在对

ng click

指令中给出的表达式求值后运行摘要循环。结果所有的

watcher

函数都会被评估，这就是为什么每次单击时都会切换值

---

幕后当您对表达式使用

ng show

指令时，angular将该表达式放在

watcher

数组中，该数组位于

$scope

对象下。您可以在

$scope.$$watchers

对象中看到

watcher

对象的集合。

这不是因为函数不存在，而是因为单击触发了

$digest

循环。因此，循环运行并评估

ngShow

和

ngBind

函数

---

这两个函数只是将一个变量翻转到原来的相反位置，然后应用结果。因此，所发生的一切就是触发一个摘要循环并触发视图中绑定的函数。

这不是因为函数不存在，而是因为单击触发了一个

$digest

循环。因此，循环运行并评估

ngShow

和

ngBind

函数

这两个函数只是将一个变量翻转到原来的相反位置，然后应用结果。因此，所发生的一切就是触发一个摘要循环，并触发视图中绑定的函数

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {

    var show = true;

    $scope.labelText = function() {
        return !show ? 'Hide' : 'Show';
    };

    $scope.showMe = function() {
        show = !show;
        return show;
    };

};