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

时间:2016-05-12 15:50:03

标签: javascript angularjs angularjs-directive angularjs-watch

我意识到那里有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的大小时(通过拖动右下角),我无法获得要更新的值。我在第二个debugger;函数中调用watch,并确认它只被调用一次。

当您找到有效的解决方案时,请随意更新链接的小提琴。

1 个答案:

答案 0 :(得分:0)

我选择用于测试目的的元素是不幸的。显然div不会像其他元素一样(特别是像{{1}} s)那样引发调整大小事件。这是我想要实现的working fiddle