Within my ion-view, I have ion-tabs containing a canvas element. However, when attempting to retrieve the canvas using
document.getElementById('photoCanvas');
I receive 'undefined'. Here is the code snippet:
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>
Controller:
$scope.loadPhotoToCanvas = function(){
$scope.canvas = document.getElementById('photoCanvas');
//etc...
};
The $scope.canvas variable remains undefined here.
If I move the canvas outside of the ion-tabs directive, getElementById works as expected. Here is the functional 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>
It seems that the issue may be related to the ion-tabs directive. How can I access the canvas within an ion-tab? Is there a fundamental flaw in this approach?