如何在对话框中实例化画布？

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获取canvas对象。这样里面的函数会在DOM操作后执行。

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

或

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