AngularJS and $document.height();?

Question

OK I'm trying to set a canvas height using `$document.height()` which works well as long as the content inside of it isn't angularJS generated as in a ng-repeat or any directive... I've created a plunker to illustrate my point basically the canvas should have the same height as the document AFTER the ng-repeat renders... ``` angular.module('ngAppDemo', []) .controller('ngAppDemoController', function ($scope, $window, $document) { $scope.canvas = angular.element('#spiro')[0]; $scope.ctx = $scope.canvas.getContext("2d"); $scope.canvas.height = $document.height(); $scope.friends = [ {name:'John', age:25, gender:'boy'}, {name:'Jessie', age:30, gender:'girl'}, {name:'Johanna', age:28, gender:'girl'}, {name:'Joy', age:15, gender:'girl'}, {name:'Mary', age:28, gender:'girl'}, {name:'Peter', age:95, gender:'boy'}, {name:'Sebastian', age:50, gender:'boy'}, {name:'Erika', age:27, gender:'girl'}, {name:'Patrick', age:40, gender:'boy'}, {name:'John', age:25, gender:'boy'}, {name:'Jessie', age:30,…

Accepted Answer

Things that are render dependent should be handled by a directive and not a controller. The controller should assign variables to the $scope, but the directive handles changes in the DOM directly.

To get changes to happen after AngularJS has finish digesting you can use $timeout. It's kind of like setTimeout in JavaScript except that it's executed after Angular finishes the current digest cycle. That means np-repeat will be executed, and then $timeout will be execute.

https://docs.angularjs.org/api/ng/service/$timeout

So you might do something like this (not tested)

```
$timeout(function(){
    $scope.canvas = angular.element('#spiro')[0];
    $scope.ctx = $scope.canvas.getContext("2d");
    $scope.canvas.height = $document.height();
});
```

AngularJS and $document.height();?

Solution

Problem