获取Div Width，然后更新Scope Variable

Get Div Width then Update Scope Variable

本文关键字：更新 Scope Variable 然后 Div Width 获取      更新时间：2023-09-26

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

因此，我设置了max-height css变量，但有时ng-bind可以返回大量文本，无论是否设置了最大高度，它都会显示这些文本。

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

为了获得div的宽度，我使用

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

然而，这提出了两个问题，我需要帮助：

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

2-那么，实际的过滤器值：limitQuestionText，我需要在页面加载后再次更新，这真的允许使用过滤器吗？在这一点上，它似乎不像通常的范围变量那样在不刷新屏幕的情况下更新。仅供参考-HTML看起来像：

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

谢谢。

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

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

请看下面的演示或这个小提琴。

备注：只有在"整页"模式下打开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>

相关文章：