Как правильно написать функцию видимости кнопки в Ангуляр 1, не вызывая бесконечный цикл $digest?

Question

[Святослав Хусамов]

У меня в шаблоне вида есть кнопка:

<button ng-show="buttonAddFriendVisibled()">Добавить в друзья</button>

Она должна быть видна, если функция buttonAddFriendVisibled() возвращает true. Эта функция описана, соответственно, в контроллере вида:

// Определение видимости кнопки Добавить в друзья
$scope.buttonAddFriendVisibled = function() {
	return (
		$scope.authenticated.hasFriend(user)
			.then(function(hasFriend) { 
				return $scope.user.id != $scope.authenticated.id && !hasFriend; 
			})
	);
};

Как вы догадываетесь, там используется $http и $q.resolve, которые запускают $digest и все это приводит к бесконечному циклу:

angular.js:63 Uncaught Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: [[{"msg":"buttonAddFriendVisibled()","newVal":{},"oldVal":{}},{"msg":"buttonRemoveFriendVisibled()","newVal":{},"oldVal":{}}],[{"msg":"buttonAddFriendVisibled()","newVal":{},"oldVal":"<>"},{"msg":"buttonRemoveFriendVisibled()","newVal":{},"oldVal":"<>"}],[{"msg":"buttonAddFriendVisibled()","newVal":{},"oldVal":"<>"},{"msg":"buttonRemoveFriendVisibled()","newVal":{},"oldVal":"<>"}],[{"msg":"buttonAddFriendVisibled()","newVal":{},"oldVal":"<>"},{"msg":"buttonRemoveFriendVisibled()","newVal":{},"oldVal":"<>"}],[{"msg":"buttonAddFriendVisibled()","newVal":{},"oldVal":"<>"},{"msg":"buttonRemoveFriendVisibled()","newVal":{},"oldVal":"<>"}]]

Как мне сделать вычисление видимости кнопки, если видимость зависит от авторизованного пользователя?

Answer 1

[Владимир]

Почитайте эти две статьи, полностью.
https://github.com/rwwagner90/angular-styleguide-es6
https://www.sitepoint.com/writing-angularjs-apps-u...

1) Слишком много лишних переменных в $scope
2) Нужно использовать ControllerAs

Answer 2

[lega]

Можно что-то типа такого, но лучше в сервис выдернуть или просто в отдельную ф-ю.

$scope.buttonAddFriendVisibled = (function(){
var result;
return function() {
  if(result != null) return result;
  result = false;
  var authenticated = $scope.authenticated;
    authenticated.hasFriend(user)
      .then(function(hasFriend) { 
        result = $scope.user.id != authenticated.id && !hasFriend; 
      })
  };
})();

Comments

[Святослав Хусамов]

У меня сейчас аналогичное временное решение. Я просто ОДИН раз вычисляю эту функцию и вставляю результат в $scope. Но проблема в том, что по идее видимость кнопки вычислять всегда когда меняется состояние authenticated или user. А тут выходит один раз вычислили, сохранили в кеш (в вашем случае в result) и все... потом хоть трава не расти.

Что делать, если нужно постоянно отслеживать видимость кнопки, которая зависит от результата с сервера (да еще и с использованием $q)?

[lega]

Сухроб Хусамов: отслеживайте зависимости, если user изменился, то пересчитать/загрузить, prevUser можно хранить тут же с result

[Святослав Хусамов]

lega: а разве отслеживать зависимости нельзя средствами ангуляра?

[lega]

Сухроб Хусамов: Можно, но в данном случае проще сравнить с предыдущим значением

[lega]

Сухроб Хусамов: В Angular Light это просто, см. фильтр load, вызывается когда надо
https://jsfiddle.net/lega911/62hshsnL/