Question

我试图限制我的角度应用的特定部分中显示的文字数量。

所以我设置了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，我需要在页面加载后更新，这实际上是否允许使用过滤器？因为它似乎不像通常的范围变量更新一样工作，而不必刷新屏幕。和FYI - HTML看起来像：

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

感谢。

Answer 1

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

无论如何使用AngularJS我会创建一个指令来触发一个resize事件处理程序，它将更新limitTo过滤器作用域值。

请查看下面的演示或此fiddle。

备注：如果您在“完整页面”中打开它，则调整大小仅在SO中有效。模式。

＆＃13;

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);
            });
        }
    };
}

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

1 个答案: