How to catch false value in directive attribute?

Question

Angular

Good afternoon!
When you turn on the history mode in the application, there is a need to check whether everything fit into the screen and if not, correct the current situation, when you exit the mode, return everything to its place
. But I don’t understand why the watcher in the directive catches only 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)
        })


      }
    }
  });
});

If an expression in an attribute is true, both watches fire
How do you know that the value of an attribute expression changed to false?

Answer 1

It is not correct to pass the !('overflowHeader') construct to $watch . The first parameter must resolve the variable name in the context, and you have written the negation of the string. Accordingly, in the context, he cannot find this.

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

Answer 2

Sorry, but this is a complete facepalm.
If you do not match the ngIf condition - there will be no block at all = the directive will not be called.
That is, you will ALWAYS have the value true.