在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中觀看元素高度的正確方法是什麼？

回答

相關問題