在AngularJS 1.4.8中观看元素高度的正确方法是什么？

我意识到有SO帖子要求类似或甚至相同的事情，但在你捣毁重复按钮之前，请注意我已经尝试了每一个解决方案，并没有一个在我的目标AngularJS版本中工作（1.4.8）。考虑到这一点：在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;，并验证它只被调用一次。

当您找到工作解决方案时，随时更新链接的小提琴。

来源

2016-05-12 Brian Gradin

使用'elem.addEventListener（'resize'，function（）{}）;'?? –

'elem.attachEventHandler'不是一个函数。 –

'elem [0]'对不起，但看看这个：http://stackoverflow.com/questions/5570390/resize-event-for-textarea –

我选择的测试元素是不幸的。显然textarea不会像调整其他元素一样调整调整大小事件（具体而言，如div s）。这是我试图实现的working fiddle。

来源

2016-05-12 16:25:03

我会建议'$ watch'，并使用简单的旧JavaScript的eventHandler。 –

'$ watch'有什么问题？ –

a）当你没有必要的时候，你完全把自己绑定到角度，b）'watch'比'eventHandler'有更多的开销，因为你试图无缘无故地进入角度摘要循环，更多的观察者在页面上变得越慢。 c）为什么要积极主动，当你可以被动...主动需要更多的内存更多的CPU，反应没有，它只是在事件发生时作出响应。 –

在AngularJS 1.4.8中观看元素高度的正确方法是什么？

回答

相关问题