Функция "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
объект.