Get Div Width then Update Scope Variable

Question

I'm trying to limit the amount of text shown in a particular section of my angular app.

So I've set the max-height css variable however at times the ng-bind can return a lot of text which it shows regardless of having set that max height.

In my attempt to solve this I'm using the limitTo filter built into Angular, however the issue is as my page resizes, this limitTo value will also need change. (The wider the window the more text I can allow).

To get the width of the div I'm using

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

However this poses 2 issues which I need help with:

1 - This variable won't be available until the page is completely loaded, thats why I'm using window.onload = function (), however if the user resized the browser window the availableWidth would need to be changed. How do i do that.

2 - Then, the actual filter value: limitQuestionText, again I need to update once the page has loaded, is this actually allowed with filters? In that it doesn't seem to work in the same way as a usual scope variable updates without having to refresh the screen. And FYI - HTML looks like:

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

Thanks.

Answer 1

OK, the CSS/SCSS aproach from your comment looks good and that's probably the way to go.

Anyway with AngularJS I would create a directive to trigger a resize event handler that will update the limitTo filter scope value.

Please have a look at the demo below or in this fiddle.

Remark: The resizing is only working in SO if you open it in 'full page' mode.

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>