View events

Learn the lifecycle events of a view

View loading

A view observes two lifecycle events in order to be initialized and presented: preLoad and postLoad.
The following diagram illustrates the order in which they occur.

PreLoad event

This event is fired when the markup of the view is about to be compiled with it's respective $scope.

NOTICE
All the data passed from the MVC controller is already available in the $scope when the preLoad is fired.


    Hi.view(function($scope){
    
        $scope.$preLoad = function(){
            
            //do whatever here
            
        }
    
    }

Transforming the html before the view is presented

The preLoad event can be used to perform some transformations on the view's html before it gets compiled with it's respective $scope. You can even change the html completely if you want to. All you have to do is return the new html you want to apply.


    Hi.view(function($scope){
     
        $scope.$preLoad = function(html){
            
            //do some html transformations in here
                        
            return newHtml;
            
        }
    
    }

PostLoad event

This event is fired right after the view is presented. It's the perfect spot to initialize some UI components.


    Hi.view(function($scope){
        
        $scope.$postLoad = function(){
                
           //you can do some intializations here
                
                
        }
        
    }


Close event

This event is fired when the user is attempting to leave the current view. Any attempt of redirecting the user will cause the execution of this lifecycle event.

NOTICE
This event is not fired when the user closes his browser's tab.


     Hi.view(function($scope){
            
         $scope.$close = function(){
                                 
               //Do something in here                 
                    
         }
            
     }
    

Making sure if the user really wants to leave the view

The best use case of the close event is when we want to make sure the user won't accidentally leave the current view.
To achieve that goal, you will have to set the scope's $preventClose variable as true.


    Hi.view(function($scope){
                
        //This is required        
        $scope.$preventClose = true;
                
        $scope.$close = function(close){
                                     
            var sure = //ask user
            if(sure)
                close.proceed();
                        
        }
                
    }

Github Repository