"Ghost"ng点击功能

"Ghost" ng-click function

本文关键字：quot 功能 Ghost ng      更新时间：2023-09-26

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

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

演示：http://jsfiddle.net/u08jgd4g/1/

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会切换，按钮值也会更改。

这不是因为函数不存在，而是因为点击触发了$digest循环。因此，循环运行并评估ngShow和ngBind函数。

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

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

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

相关文章：