javascript - 获取 Div 宽度然后更新范围变量

Question

我正在尝试限制在我的 Angular 应用的特定部分中显示的文本量。

所以我设置了 max-height css 变量，但是有时 ng-bind 可以返回很多文本，无论是否设置了 max高度。

在我尝试解决这个问题时，我使用了 Angular 内置的 limitTo 过滤器，但是问题是随着我的页面调整大小，这个 limitTo 值也需要改变. (窗口越宽，我可以允许的文本越多)。

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

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

然而，这会带来 2 个我需要帮助的问题:

1 - 此变量在页面完全加载之前不可用，这就是我使用 window.onload = function () 的原因，但是如果用户调整浏览器窗口的大小 availableWidth 需要更改。我该怎么做。

2 - 然后，实际的过滤器值:limitQuestionText，我需要在页面加载后再次更新，这实际上允许过滤器吗？因为它似乎不像通常的范围变量更新那样工作而不必刷新屏幕。仅供引用 - HTML 看起来像:

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

谢谢。

Answer 1

好的，您评论中的 CSS/SCSS 方法看起来不错，这可能是可行的方法。

无论如何，对于 AngularJS，我会创建一个指令来触发调整大小事件处理程序，该处理程序将更新 limitTo 过滤器范围值。

请查看下面或此 fiddle 中的演示.

注意:调整大小仅在您以“全页”模式打开它时在 SO 中起作用。

angular.module('demoApp', [])
	.controller('mainController', MainController)
	.directive('resize', ResizeDirective);
    
function MainController() {
	var vm = this;
    //console.log();
    //loading text from script tag (easier to write than inlined here)
    vm.limit = 50;
    vm.story = {
    	point: document.getElementById('dummyText.txt').text
    };
}

function ResizeDirective($window, $timeout) {
	return {
    	scope: {
        	limit: '='
        },
    	link: function(scope, elem) {
        	var curWidth;
            function onResize(e) {
            	curWidth = e.target.innerWidth;
                
                $timeout(function() {            	
                    if ( curWidth >= 500 ) {
	                	scope.limit = 80;
                    } else {
                        scope.limit = 50;
                    }

                    console.log(scope.limit);
                }, 0); // timeout = run with next digest / also scope.$apply() would be OK
            	//console.log('resized', e);
            }
            
            // bind resize event
            angular.element($window).bind('resize', onResize);
            
            // dispatch event to trigger once at load to have the current width
            $window.dispatchEvent(new Event('resize'));
          
            scope.$on('$destory', function() {
            	// remove resize handler if directive scope destroyed
            	angular.element($window).unbind('resize', onResize);
            });
        }
    };
}

.container {
    background-color: gray;
    max-width: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demoApp" ng-controller="mainController as mainCtrl">

<pre>
    scope limit {{mainCtrl.limit}}
    cur. text length {{mainCtrl.limitedContent.length}}
</pre>
<div class="container" resize limit="mainCtrl.limit">
{{mainCtrl.limitedContent = (mainCtrl.story.point | limitTo: mainCtrl.limit)}}
</div>

<script type="text/plain" id="dummyText.txt">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</script>

</div>