Как создать экземпляр холста в диалоговом окне?

Question

Я хотел бы создать экземпляр холста, доступного в диалоговом окне, но он всегда возвращает нулевой объект. В моем JavaScript файле у меня есть:

 $scope.showAdvanced = function(ev) { 
     var useFullScreen = ($mdMedia('sm') || $mdMedia('xs')) && $scope.customFullscreen; 
     var myDialog = $mdDialog.show({ 
      controller: DialogController, 
      templateUrl: '../templates/dialogCanvas.html', 
      parent: angular.element(document.body), 
      targetEvent: ev, 
      clickOutsideToClose:true, 
      fullscreen: useFullScreen, 
     }) 
       .then(function(answer) { 
        $scope.status = 'You said the information was "' + answer + '".'; 
     }, function() { 
      $scope.status = 'You cancelled the dialog.'; 
     }); 
     $scope.$watch(function() { 
      return $mdMedia('xs') || $mdMedia('sm'); 
     }, function(wantsFullScreen) { 
      $scope.customFullscreen = (wantsFullScreen === true); 
     }); 
    }; 

В моем HTML файл (dialogCanvas.html), у меня есть этот тег:

<div id="back"> 
    <canvas id="canvasZone"></canvas> 
</div> 

И, наконец, в функции контроллера я пытаюсь создать экземпляр холста, делая это:

function DialogController($scope, $mdDialog) { 
     var canvas = document.getElementById('canvasZone'); 
    } 

Но объект пуст.

Answer 1

Попробуйте получить объект canvas с помощью $timeout или $evalAsync. Таким образом, функция внутри будет выполнена после DOM-манипуляции.

$scope.$evalAsync(function(){ 
    var canvas = document.getElementById('canvasZone'); 
}); 

или

$timeout(function(){ 
    var canvas = document.getElementById('canvasZone'); 
},0);