대화 상자에서 캔버스를 인스턴스화하는 방법은 무엇입니까?

Question

대화 상자에서 사용할 수있는 캔버스를 인스턴스화하고 싶지만 항상 null 개체를 반환합니다. 내 자바 스크립트 파일에서 내가 가진 :

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

그리고 마지막으로 컨트롤러 기능에서 내가 수행하여 캔버스를 인스턴스화하려고 :

내 HTML 파일 (dialogCanvas.html)에서

 $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); 
     }); 
    }; 

,이 태그가 이 :

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

그러나 개체는 null입니다.

Answer 1

$timeout 또는 $evalAsync을 사용하여 캔버스 객체를 가져와보십시오. 이렇게하면 DOM 조작 후 내부 함수가 실행됩니다.

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

또는

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