Question

我有内部离子标签的离子视图。当我尝试使用

获取画布时

document.getElementById('photoCanvas');

我得到'未定义'。这是我的代码：

HTML：

    <ion-view  name="photo" ng-init="loadPhotoToCanvas()">
        <ion-tabs class="tabs-icon-left">
            <ion-tab title="Image" icon-on="ion-image" icon-off="ion-image">
                <ion-scroll delegate-handle="photoScroll" zooming="true" direction="xy" style="width: 100%; height: 40em;">
                     <canvas id="photoCanvas" on-touch="canvasMouseDown($event)" on-release="canvasMouseUp($event)" on-drag="canvasMouseMove($event)">
                     </canvas>
                </ion-scroll>
            </ion-tab>
        </ion-tabs>
    </ion-view>

控制器：

$scope.loadPhotoToCanvas = function(){
    $scope.canvas = document.getElementById('photoCanvas');
     //etc...
};

$ scope.canvas这里是未定义的。

如果我将canvas放在ion-tabs指令之外，那么getElementById可以工作。这是工作html：

<ion-view  name="photo" ng-init="loadPhotoToCanvas()">
    <ion-scroll delegate-handle="photoScroll" zooming="true" direction="xy" style="width: 100%; height: 40em;">
         <canvas id="photoCanvas" on-touch="canvasMouseDown($event)" on-release="canvasMouseUp($event)" on-drag="canvasMouseMove($event)">
         </canvas>
    </ion-scroll>
</ion-view>

我认为这个问题与ion-tabs指令有某种关系。如何从离子片中获取画布？这种方法在概念上有问题吗？

Answer 1

解决方案是在ionicView上侦听afterEnter事件。在视图加载完成之前已触发loadPhotoToCanvas方法。这解决了我的问题：

$scope.$on('$ionicView.afterEnter', function (viewInfo, state) {
    $scope.loadPhotoToCanvas();
});

我还从html中删除了ng-init，因为它不再需要了。

ion-tab中的document.getElementbyId

1 个答案: