如何在對話框中實例化畫布？

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

嘗試使用$timeout或$evalAsync獲取畫布對象。通過這種方式，內部函數將在DOM操作後執行。

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

或

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