How to access DOM elements immediately after $state.go

ionic-v1
1

The question may not have a possible answer, but in that event my next question is how to properly wait until the $state.go finishes before executing additional code. In my application the user is presented with a profile that they can modify and a place where they can add pictures via camera or local upload. Once the user selects the image they are transfered to another state where the Cropper has been set up and decorated. (Custom HTML5 canvas crop code I wrote). However when the Cropper attempts to find the canvas by the ID in the DOM it can’t.

Here’s an example of how this works(when using a local file):

 $state.go('app.crop');
 Cropper.init({
    Canvas: 'crop-canvas',
    Image: 'img/4.jpg',
    ImageMaxDimension: {width: 8096, height: 8096}
}, function() {
    Cropper.paint();
}, function(error) {
    alert(error);
});

However, it cannot find the canvas with the id of “crop-canvas” in the app.crop page. (pages/crop.html)

If I put a canvas in the previous page (profile.html) I have no problems with the code, so I need to figure out how to allow the $state.go transition to finish before executing any additional code.

2

If I understand your question correctly you want to fire code between states? There are events you can listen to and I think you’ll find $ionicView.loaded more appropriate for what you are wanting to do.

View LifeCycle
In order to improve performance, we’ve improved Ionic’s ability to cache view elements and scope data. Once a controller
is initialized, it may persist throughout the app’s life; it’s just hidden and removed from the watch cycle. Since we
aren’t rebuilding scope, we’ve added events for which we should listen when entering the watch cycle again.

$ionicView.loaded The view has loaded. This event only happens once per view being created and added to the DOM. If a view leaves but
is cached, then this event will not fire again on a subsequent viewing. The loaded event is good place to put your setup
code for the view; however, it is not the recommended event to listen to when a view becomes active.
$ionicView.enter The view has fully entered and is now the active view.
This event will fire, whether it was the first load or a cached view.
$ionicView.leave The view has finished leaving and is no longer the
active view. This event will fire, whether it is cached or destroyed.
$ionicView.beforeEnter The view is about to enter and become the active view.
$ionicView.beforeLeave The view is about to leave and no longer be the active view.
$ionicView.afterEnter The view has fully entered and is now the active view.
$ionicView.afterLeave The view has finished leaving and is no longer the active view.
$ionicView.unloaded The view’s controller has been destroyed, and its element has been
removed from the DOM.

An example of using these events would be:

$scope.$on('$ionicView.afterEnter', function(){
  // Any thing you can think of
});
2 Likes
3

Maybe it is enough to use the returned promise of the $state.go

$state.go('app.crop').then(function () {
 // code to execute after successfully transition
});

But keep in mind liek delta98 mentioned… there are ionic events to handle special states of the view.
DOM-utilities like crop tools are calculating positions of dom element to work correctly. If you execute their code during e.g. the page transition they could not work as expected.

So if you are not sure use the $ionicView.afterEnter

1 Like