Javascript 获取Div Width，然后更新范围变量

我试图限制angular应用程序特定部分中显示的文本量

因此，我设置了

max height

css变量，但有时

ng bind

会返回大量文本，无论设置了该最大高度，它都会显示这些文本

在我试图解决这个问题时，我使用Angular内置的

limito

过滤器，但是问题是，随着页面大小的调整，这个

limito

值也需要更改。（窗口越宽，允许的文本越多）

获取我正在使用的div的宽度

window.onload = function () {
  var availableWidth = document.getElementById('theJazz').clientWidth;
  if (availableWidth >= 500) {
    self.limitQuestionText = 80;
  } else {
    self.limitQuestionText = 50;
  }
}

但是，这带来了两个问题，我需要帮助：

1-此变量在页面完全加载之前不可用，这就是我使用

window.onload=function（）

的原因，但是如果用户调整了浏览器窗口的大小，则需要更改

可用宽度

。我该怎么做呢

2-然后，实际的过滤器值：

limitQuestionText

，我再次需要在页面加载后更新，过滤器是否允许这样做？在这方面，它的工作方式似乎不同于通常的范围变量更新，而无需刷新屏幕。仅供参考-HTML看起来像：

ng-bind-html="story.point | limitTo: main.limitQuestionText"

---

谢谢。

好的，你评论中的CSS/SCSS页面看起来不错，这可能就是解决问题的方法

无论如何，对于AngularJS，我将创建一个指令来触发调整大小事件处理程序，该处理程序将更新

limito

过滤器范围值

请看一下下面的演示或本演示

备注：只有在“整页”模式下打开时，调整大小才起作用

angular.module（'demoApp'，[]）
.controller（'mainController'，mainController）
.directive（“resize”，ResizeDirective）；
函数MainController（）{
var vm=这个；
//console.log（）；
//从脚本标记加载文本（比此处内联更容易编写）
vm.limit=50；
vm.story={
要点：document.getElementById（'dummyText.txt'）.text
};
}
函数ResizeDirective（$window，$timeout）{
返回{
范围：{
限制：'='
},
链接：功能（范围、要素）{
变宽；
函数onResize（e）{
curWidth=e.target.innerWidth；
$timeout（函数（）{
如果（电流宽度>=500）{
scope.limit=80；
}否则{
scope.limit=50；
}
console.log（scope.limit）；
}，0）；//timeout=使用下一个摘要/范围运行。$apply（）可以
//console.log（'resized'，e）；
}
//绑定调整大小事件
元素（$window）.bind（'resize'，onResize）；
//要在加载时触发一次的调度事件，以具有当前宽度
$window.dispatchEvent（新事件（'resize'））；
作用域.$on（“$destory”，函数（）{
//如果指令作用域被破坏，请删除调整大小处理程序
角度.element（$window）.unbind（'resize'，onResize）；
});
}
};
}

.container{
背景颜色：灰色；
最大宽度：100px；
}

作用域限制{mainCtrl.limit}
cur。文本长度{mainCtrl.limitedContent.length}
{{mainCtrl.limitedContent=（mainCtrl.story.point | limitTo:mainCtrl.limit）}
他说：“我的工作是在工作中完成的，我的工作是在工作中完成的，我的工作是在工作中完成的。”。在vero eos和accusam以及justo duo dolores和ea Reum。斯泰特·克莱塔·卡斯德·古伯格伦（Stet clita kasd gubergren），没有海洋保护区是属于同一领域的。他说：“我的工作是在工作中完成的，我的工作是在工作中完成的，我的工作是在工作中完成的。”。在vero eos和accusam以及justo duo dolores和ea Reum。斯泰特·克莱塔·卡斯德·古伯格伦（Stet clita kasd gubergren），没有海洋保护区是属于同一领域的。他说：“我的工作是在工作中完成的，我的工作是在工作中完成的，我的工作是在工作中完成的。”。在vero eos和accusam以及justo duo dolores和ea Reum。斯泰特·克莱塔·卡斯德·古伯格伦（Stet clita kasd gubergren），没有海洋保护区是属于同一领域的。

我最终使用了此解决方案：我投票将此问题作为离题题结束，因为提问者放弃了该问题，并在此处提供了对其解决方案的外部引用。堆栈溢出鼓励用户回答自己的问题。请确保包含代码片段和解释。如果链接过时，仅链接的答案对其他读者没有用处。我发现了解决方案。但是我问题中的两点仍然是我不清楚的，以防止内存泄漏，当指令作用域被破坏时，

resize

指令需要解除resize事件处理程序的绑定。