высота углового изменения высоты экрана при изменении ширины или высоты экрана

Question

Я пытаюсь создать директиву, которая будет слушать изменение размера экрана (ширина или высота) и изменит мою высоту элемента.

Целью является то, что я хочу, чтобы мой элемент расширялся до конца окна браузера.

это моя директива:

.directive('strechToBottom', ['$document', '$window', function ($document, $window) { 
    return { 
     restrict: 'A', 
     link: function (scope, element, attributes) { 

      var space; 

      scope.$watch(function() { 
       return $window.innerHeight; 
      }, function() { 
       space = $window.innerHeight - element[0].offsetTop; 
       element.css('min-height', space + "px"); 
      }); 

     } 
    }; 
}]); 

Когда элемент создается функция вызывается, и все в порядке. Проблема в том, что когда я меняю размер экрана, функция не вызывается, она вызывается через некоторое время, как будто требуется время, пока функция не будет вызвана в цикле или что-то, что я не могу понять.

Я попытался также прослушать innerWidth, но это не сработало.

В чем проблема с моим кодом?

Answer 1

Привязывание к всем дайджесту объема, как вы это делаете, передавая функцию в $scope.$watch в качестве первого аргумента, делает выполнение функции недетерминированным способом (с вашей точки зрения). В принципе, он будет выполняться только в той форме взаимодействия с приложением (это не очень точно, но это хорошее первое приближение).

Чтобы сделать что-то, когда окно просмотра изменяется, используйте родной resize событие:

angular.element($window).on('resize', function() { 
    $scope.$apply(function() { 
     // ... perform your magic here 
    }); 
}); 

---

Если выше на самом деле не сообщить вам все, что вы рассмотреть изменение размера, вы могли бы вместо того, чтобы делать то, что вы сейчас делаете, и как раз и вызвать $digest() на изменение размера окна:

angular.element($window).on('resize', function() { 
    $scope.$digest(); 
}); 

Однако, вы должны опасаться последствий производительности bindin g функций, которые должны выполняться на каждом дайджесте.