【问题标题】:What is the correct way to watch an element's height in AngularJS 1.4.8?在 AngularJS 1.4.8 中查看元素高度的正确方法是什么?
【发布时间】:2016-09-08 13:50:54
【问题描述】:

我意识到那里有 SO 帖子询问类似甚至相同的事情,但在你捣碎重复按钮之前,请注意我已经尝试了每一个解决方案,但没有一个在我的目标 AngularJS 中工作版本(1.4.8)。考虑到这一点:

HTML:

<div ng-app="app" ng-controller="app">
  <textarea size-watch>{{ height }}</textarea>
</div>

JavaScript:

angular.module("app", [])
.controller("app", function() {
})
.directive("sizeWatch", function() {
    return {
    restrict: "A",
    link: function(scope, elem) {
            scope.$watch(function() { return elem[0].offsetHeight; }, function(newHeight, oldHeight) {
        scope.height = newHeight;
      }, true);
    }
  }
});

Fiddle.

这就是我想要做的:我想创建一个指令来监视元素的高度,并在它发生变化时更新范围上的属性。我可以获得初始显示的值,所以我知道指令和控制器/范围之间的链接正在工作。但是,当 textarea 调整大小(通过拖动右下角)时,我无法获取要更新的值。我在第二个watch 函数中调用了debugger;,并验证它只被调用一次。

找到可行的解决方案后,请随时更新链接的小提琴。

【问题讨论】:

标签: javascript angularjs angularjs-directive angularjs-watch


【解决方案1】:

我选择用于测试目的的元素是不幸的。显然textarea 不会像其他元素一样引发调整大小事件(特别是像divs)。这是我试图实现的working fiddle

【讨论】:

  • 我建议不要使用$watch,只使用普通的旧javascript eventHandler。
  • a) 当你没有必要时,你完全将自己绑定到 Angular 中,b) $watch 的开销比 eventHandler 多得多,因为你正试图挂钩到 angular 摘要循环没有理由,页面上的观察者越多,它变得越慢。 c)当你可以反应时为什么要主动......主动需要更多内存更多cpu,反应不需要,它只是在事件发生时响应。
  • 好吧,我将使用最有效的解决方案。到目前为止,我还无法让eventHandlers 工作,也没有看到其他任何人提供的解决方案。 $watch 有效,我的项目已经与 Angular 紧密相关。
  • 关于$watch 的劣势我还有一个问题——你提到了主动与被动……$watch 是否使用轮询?
  • 是的,因为它是摘要循环的一部分,所以它会将观察者附加到该对象的特定属性,然后它会每隔一段时间检查该值以查看它是否已更改(脏检查)
猜你喜欢
  • 2018-03-30
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2011-01-06
  • 1970-01-01
  • 1970-01-01
  • 2016-08-27
相关资源
最近更新 更多