Функция "Ghost" ng-click

Как раз когда я подумал, что знаю 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 и значение кнопки изменяется.

2 ответа

Решение

Это не потому, что функция не существует, а потому, что щелчок вызывает $digest цикл. Таким образом, цикл запускается и оценивает ваш ngShow а также ngBind функции.

Эти 2 функции просто переворачивают переменную в противоположную ей сторону и применяют результат. Таким образом, все, что происходит, - это запуск цикла дайджеста и отключение функций, связанных в представлении.

Это происходит потому, что вы использовали ng-click функция, которая запускает цикл дайджеста после вычисления выражения, заданного на ng-click директивы. Результирующий все watcher Функция оценивается, поэтому ваше значение переключается при каждом нажатии.

За кулисами, когда вы используете ng-show директива с выражением, угловой внутри помещает это выражение внутри watcher массив который там под $scope объект. Вы можете увидеть коллекцию watcherобъект внутри $scope.$$watchers объект.

Другие вопросы по тегам