AngularJS 和 $document.height();？

Question

好吧，我正在尝试使用 $document.height() 设置 Canvas 高度，只要其中的内容不是像 ng-repeat 那样由 angularJS 生成，它就可以正常工作。任何指令...我创建了一个plunker为了说明我的观点，基本上 Canvas 应该与 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

与渲染相关的事情应该由指令而不是 Controller 来处理。 Controller 应该将变量分配给 $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();
});