Angularjs. Почему изменения на странице происходят только после $apply?

Question

[Егор]

Есть 2 инпута

<input type="text" class="search-input real-search-input" data-ng-hide="showFakeInput"/>
<input type="text" class="search-input fake-search-input " disabled="disabled" data-ng-show="showFakeInput" />

В контроллере слушаются события. Сами события вызываются из директивы.

$scope.showFakeInput = false; 

$rootScope.$on('showFakeSearchInput', function () {
      $scope.showFakeInput = true;
});

$rootScope.$on('hideFakeSearchInput', function () {
     $scope.showFakeInput = false;            
});

При первом вызовы события 'showFakeSearchInput' все работает прекрасно. Первый инпут ('.real-search-input') исчезает, и .fake-search-input появляется.

А вот если потом вызвать 'hideFakeSearchInput', то изменений не происходит. Т.е переменная меняется, но .real-search-input остается скрытым, а .fake-search-input остается видимым.

Если сделать так

$rootScope.$on('hideFakeSearchInput', function () {
     $scope.showFakeInput = false;        
     $scope.$apply();    
});

То все работает как надо.

Почему так происходит и можно ли обойтись без $apply ?

Answer 1

[Сергей Протько]

Вы не поняли как работает дата-биндинг в ангуляре. То есть тот самый краеугольный камень, на котором держится ангуляр вы и не поняли.

$apply вызывает у rootScope $digest-цикл, в котором сравнивается текущее значение и последнее сохраненное. При наличии изменений - запускается ватчер.

Так что краткий ответ - нет, без $apply ничего работать не будет. Длинный ответ - www.sitepoint.com/understanding-angulars-apply-digest

Comments

[Егор]

тогда почему при вызове 'showFakeSearchInput' все работает без $apply ?

[Сергей Протько]

@ByKraB: скорее всего событие вызывается вместе с $apply. Или предыдущий цикл еще не закончил обрабатываться (если у вас действие проиходит по ng-change/ng-click то там тоже запускается $apply. Каждая итерация $digest цикла запускается с setTimeout. То есть выполнение откладывается до тех пор пока JS не прекратит работу дат текущими делами.

Не видя кода директивы или всего кода сложно сказать. Но факт остается фактом - $apply или $digest должны быть запущены.

Answer 2

[Andrey Zenkov]

Почитайте - habrahabr.ru/post/201832 , очень хорошо разжевано.

Comments

[Егор]

"Идея состоит в том, что используя $apply, мы можем выполнять код, не знакомый с Angular. Этот код может менять данные в scope, а $apply позаботится о том, чтобы наблюдатели подхватили эти изменения. Именно эти и имеют ввиду, когда говорят об «интеграции кода в жизненный цикл Angular». Это и ничего больше."

Я выполняю все в контексте Angulara. Переменная в котроллере + стандартные директивы. Внешнего кода никакого нет.

Answer 3

[Егор]

читаю вот это

ata binding means that when you change something in the view, the scope model automagically updates. Similarly, whenever the scope model changes, the view updates itself with the new value

У меня все выполняется в контексте, т.е в контроллере, используются стандартные директивы ng-show, ng-hide. Почему я должен вызывать $apply, если я использую только стандартные директивы Angular и вне Angular ничего не меняю?

Answer 4

[_ _]

Покажите вызов события из директивы. Предполагаю, что проблема там.

Comments

[Егор]

$rootScope.$emit('hideFakeSearchInput');
$rootScope.$emit('showFakeSearchInput');