Question

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

设置元素的高度，使其（最终）等于窗口高度。所以它应该随着窗口大小调整而改变。

但是，在调整窗口大小时，它不会更新。

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条指令或它们如何变得有用。我确实尝试了两个$watch es，类似于他们在那里所做的，但它也无济于事。

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注入为依赖项。

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>

Answer 2

问题是$watch只有在调用$apply()或$digest()时才会被调用。 Angular不会为每个事件运行观察者，因为这会使浏览器真正变得迟钝。将run部分放在主模块中。

angular.module('app', []).directive(...).run(function($rootScope) {
    angular.element(window).on("resize", function() {
        $rootScope.$apply();
    });
})

以角度指令观察元素的高度

2 个答案: