"Ghost"点击功能

Question

就在我以为我很了解 Angular 的时候，我运行陷入了这种情况：

谁能解释一下这是怎么可能的？

HTML

<div ng-controller="MyCtrl">

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

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

</div>

JS

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;
    };

};

如果您还没有发现问题：该按钮具有不存在的 ng-click 功能，但是当您单击该按钮时，div 切换并且按钮值变化。

Answer 1

发生这种情况是因为您使用了 ng-click 函数，该函数在对 ng-click 指令中给出的表达式求值后运行摘要循环。结果所有 watcher 函数都得到评估，这就是为什么您的值在每次点击时都会切换。

当您使用带有表达式的 ng-show 指令时，angular 在内部将该表达式放入 watcher 数组中，该数组位于 $scope 对象下。您可以在 $scope.$$watchers 对象中看到 watcher 对象的集合。

Answer 2

不是因为该功能不存在，而是因为那个点击触发了一个$digest循环。因此循环运行并评估您的 ngShow 和 ngBind 函数。

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

"Ghost"点击功能

"Ghost" ng-click function

javascript

angularjs

angularjs-digest