Как поймать значение false в атрибуте директивы?

Question

[Артём Щурин]

Добрый день!
При включении режима истории в приложение, есть необходимость проверить всё ли влезло в экран и если нет, исправить сложившуюся ситуацию, при выходе из режима всё вернуть на место
Но я не пойму почему вотчер в директиве ловит только true

<div class="history-controls" overflow-header="mode === 'history'" ng-if="mode === 'history'"></div>

define(['app'], function(app) {
	app.directive('overflowHeader', function() {
		return {
			restrict: 'A',
			link: function($scope, element, attrs) {

				$scope.$watch('overflowHeader', function(e){
					console.log(element)
				})

				$scope.$watch(!('overflowHeader'), function(e){
					console.log(element)
				})


			}
		}
	});
});

Если выражение в атрибуте true срабатывают оба watch'а
Как узнать что значение выражения атрибута изменило значение на false?

Answer 1

[Alex XYZ]

Неправильно передавать в $watch конструкцию !('overflowHeader'). Первый параметр должен разрешать имя переменной в контексте, а у вас написано отрицание строки. Соответственно в контексте он такого найти не может.

$scope.$watch('overflowHeader', function(e){
          if(e==true){
          }
          if(e==false){
          }
        })

Comments

[Артём Щурин]

Захаров Александр !('overflowHeader') эту конструкцию написал чтобы показать что хочу сделать, $watch не вызывает колбэк если значение выражения атрибута false, только когда true

[Alex XYZ]

Артём Щурин: эту конструкцию написал чтобы показать что хочу сделать... Я бы осторожнее писал такую "конструкцию", потому что не очень понятно, кому вы хотите это показать? У меня два варианта: Читателю вопроса и ангуляру. Ангуляру "показывать" бесполезно ;)
Вызов происходит при смене значения. Но с исключениями. Если переменная меняется вне контекста ангуляра, тогда может и не срабатывать. Приведите код, где меняется значение или опишите кто это делает. Не очень понятно.

[Артём Щурин]

Захаров Александр: Переменная изменяется в контроллере

this.historyMode = function() {
				debugger;
				if($scope.mode === 'history') {
					$scope.mode = 'init';

					/**
					 * REMOVE EVENT LISTENER "EVENTS.ON_SEND_REQUEST" BEFORE ACTION
					 *
					 * */
					params.makeAction($scope.controller, 'timeline_hide_mode');
				}else {
					$scope.mode = 'history';
					unsetParamsMode();
					params.makeAction($scope.controller, 'timeline_show_mode', $scope.timeline.range);
				}
			};

<div class="header-button" ng-class="mode === 'history' ? 'active' : ''" ng-click="ctrl.historyMode()">
            <span class="ui-button-text">История</span>

        </div>

Всё дело происходит внутри 1-го scope, даже в директиву протащил родительский scope и стал следить за $scope.mode, она не срабатывает на значение 'init', для интереса давал начальное значение переменной отличное от 'init', расчитывая на то, что возврат к первоначальному значению не отслеживается, ан нет, всё тоже 'history' попадаю в обработчик, 'init' нет
У меня на самом деле 2 кнопки режимов, истории и параметров, режим параметров реализован аналогично, тоже свой callback и тоже так же директива не реагирует ни на false в значении атрибута, ни на изменение значения переменной $scope.mode

[Alex XYZ]

Артём Щурин: Ещё может быть тонкость в разрешении имён. Такой способ записи как $scope.$watch('overflowHeader', ... не очень хорош. Я бы советовал объявлять новые переменные в контексте не $scope.var1, $scope.var2, а с промежуточной структурой: $scope.context = {var1: "", var2: ""...}, чтобы в watcher писать так: $watch("context.var1', ... Иногда у angular возникает путаница в разрешении имён. Мне всё равно не очень понятно, как у вас в коде меняется переменная overflowHeader.
Хотя может и прав Mikhail Osher.

[Артём Щурин]

Захаров Александр: overflowHeader в коде не меняется, директива лишь указывает, что на этих элементах должно отработать то или иное поведение, да и вотч повесил уже на переменную из $scope, а эта переменная меняется по обработчику ng-click, есть 2 обработчика которым доступно её изменение, режим истории и режим параметров, даже если я оставляю 1, безрезультатно

Answer 2

[Mikhail Osher]

Извините, но это полный facepalm.
Если у Вас не совпадает условие ngIf - блока не будет вообще = директива не вызовется.
То есть, у вас ВСЕГДА будет значение true.

Comments

[Артём Щурин]

Mikhail Osher: такое как раз поведение и наблюдаю, решил повесить $watch на переменную родительского $scope, начальное значение переменной: $scope.mode='init', значение переменной меняем либ на 'parameters' либ 'history' либ обратно 'init', в директиву попадаю только при значениях 'parameters' и 'history', хотя на протяжении эксперимента переменная принимает значение 'init'