angularjs - 在 Angular 指令中观察元素的高度

Question

我正在尝试在指令的 link 函数中$watch 元素的高度。

元素的高度设置为(最终)等于窗口高度。所以它应该随着窗口大小的改变而改变。

但是当您调整窗口大小时它不会更新。

angular.module('app', []).directive('element', function($interval) {
  return {
    restrict: 'E',
    link: function(scope, element) {
      scope.$watch(
        function() {
          return element.height();
        },
        function(height) {
          console.log('element updated', element.height());
        });
    },
  };
});

element {
  display: block;
  border: 1px dotted;
}
* {
  height: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  <element>test</element>
</div>

我已经阅读了这个related question但我不明白他们为什么使用 2 个指令或它们如何变得有用。我确实尝试了两个 $watches，类似于他们在那里所做的，但也无济于事。

angular.module('app', []).directive('element', function($interval) {
  return {
    restrict: 'E',
    link: function(scope, element) {
      scope.$watch('__height',
        function(height) {
          console.log('element updated', element.height());
        });
      scope.$watch(
        function() {
          scope.__height = element.height();
        });
    },
  };
});

element {
  display: block;
  border: 1px dotted;
}
* {
  height: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  <element>test</element>
</div>

Answer 1

这里不需要$watch。您可以简单地将 resize 事件处理程序添加到 $window 并使用 window.innerHeight 将窗口高度应用到元素。确保 $window 作为依赖注入(inject)。

angular.module('app', []).directive('element', function($interval, $window) {
  return {
    restrict: 'E',
    link: function(scope, element) {
      $window.addEventListener('resize', function() {
          element.css('height', window.innerHeight);
      }, false);
    },
  };
});

element {
  display: block;
  border: 1px dotted;
}
* {
  height: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  <element>test</element>
</div>