AngularJS和$ document.height（）;?

Question

好的我正在尝试使用$document.height()来设置画布高度，只要其内部的内容不是ng-repeat或任何指令中生成的angularJS，效果都很好...... 我创建了一个plunker来说明我的观点，基本上画布应该与ng-repeat渲染后的文档具有相同的高度......

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'}
  ];

});

克里斯

Answer 1

依赖渲染的事物应该由指令而不是控制器处理。控制器应该将变量分配给$ scope，但该指令直接处理DOM中的变化。

要在AngularJS完成摘要后进行更改，您可以使用$ timeout。它有点像JavaScript中的setTimeout，除了它在Angular完成当前摘要周期后执行。这意味着将执行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();
});