AngularJS 및 $ document.height() ;?

Question

OK 캔버스 높이를 $document.height()을 사용하여 설정하려고합니다. 내부의 내용이 ng-repeat 또는 any 지시문 에서처럼 생성되지 않은 경우에만 작동합니다. plunker을 만들었습니다.

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, 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, 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, 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:'Samantha', age:60, gender:'girl'} 
    ]; 

}); 

크리스에게 ... 기본적으로 캔버스가 NG-반복 렌더링 후 문서와 동일한 높이를 가져야한다

Answer 1

따라 렌더링하는 것 지시문에 의해 처리되어야 아닌 컨트롤러를 내 지점을 설명 . 컨트롤러는 $ scope에 변수를 할당해야하지만 지시문은 DOM의 변경 사항을 직접 처리합니다.

AngularJS가 소화가 완료된 후 변경 사항을 적용하려면 $ timeout을 사용할 수 있습니다. Angular가 현재의 다이제스트주기를 완료 한 후에 실행된다는 점을 제외하고는 JavaScript에서 setTimeout과 비슷합니다. 즉, np-repeat가 실행되고 $ timeout이 실행됩니다.

https://docs.angularjs.org/api/ng/service/ $ 제한 시간

그래서 당신이 뭔가를 (테스트하지)

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