document.getElementbyId裏面的離子選項卡

我有離子選項卡里面的離子選項卡。當我嘗試使用畫布時document.getElementbyId裏面的離子選項卡

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>

我相信這個問題是主題相關的離子標籤指令。我如何從離子選項卡獲取畫布？這種方法在概念上有錯嗎？

來源

2015-10-20 A.Z.

解決方法是在ionicView上偵聽afterEnter事件。 loadPhotoToCanvas方法在視圖加載完成之前被觸發。這解決了我的問題：

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

我也從HTML刪除ng-init，因爲它不再需要。

來源

2015-10-20 14:09:34

document.getElementbyId裏面的離子選項卡

回答

相關問題