4

Please, I'm using ui-router on my project. $stateChangeStart event work fine when the user navigate between the states. But it doesn't work if I refresh the browser.

This is my source code:

(function(){
'use strict';

angular.module('app.overlay')
    .directive('ibLoading', ['$rootScope' , '$timeout', loading]);

    function loading($rootScope , $timeout){
        console.log("In dirrective");
        var directive = {
            restrict:'EAC',
            link:link
        };

        function link(scope, element) {

            $rootScope.$on('$stateChangeStart', function() {
                    $timeout(function(){
                        element.addClass('show');
                    } , 50);
              });

              $rootScope.$on('$stateChangeSuccess', function() {
                    $timeout(function(){
                        element.removeClass('show');
                    } , 700);
              });

        }

        return directive;
    }
})();

my layout file

<div ng-controller="ShellController as vm">
<header class="clearfix">
    <ht-top-nav navline="vm.navline"></ht-top-nav>
</header>
<section id="content" class="content">
    <!--<div ng-include="'app/layout/sidebar.html'"></div>-->
    <div ui-view></div>
    <div class="ib-loading">Loading ...</div>
</section>
</div>
hubert
  • 2,997
  • 3
  • 20
  • 26
  • Can you provide some code examples? – Joe Clay Feb 26 '16 at 17:45
  • That would depend on where it is used. Without any code nobody can help you. Please provide relevant code – charlietfl Feb 26 '16 at 17:47
  • Are you expecting directive to register the initial change when page is loaded? It won't. Still not clear what problem is or what expected behavior is – charlietfl Feb 26 '16 at 17:56
  • the directive is register but the event is not 'captured' when the browser is refresh.. You can't only see in log **In dirrective**. – hubert Feb 26 '16 at 17:59
  • 1
    Can you please share your states configuration? And where do you use it? May be some sample code, pseudo code will also help, @charlietft suggest... There is not information. ;) – Dave Amit Feb 26 '16 at 18:02
  • 1
    Where in page is directive used? This should be done using scope variables and `ng-class` or `ng-show` first of all. Also first state change will have started before directive is compiled probably – charlietfl Feb 26 '16 at 18:02
  • I use a directive in my layout file. – hubert Feb 26 '16 at 18:05
  • Create a demo in [plunker](http://plnkr.co/edit/?p=catalogue) that replicates problem – charlietfl Feb 26 '16 at 18:06
  • `layout file` is meaningless to us. Tells us nothing about the html structure – charlietfl Feb 26 '16 at 18:06
  • thank @DaveAmit , I moved it to my index.html file ( the first line, out of any controller) and it work's fine. – hubert Feb 26 '16 at 18:11
  • 1
    Awesome news! Keep up the good work! – Dave Amit Feb 26 '16 at 18:12
  • I have the same problem and I didn't understand what the solution is. You moved what to the index.html file? – Nick Jun 20 '16 at 13:56

2 Answers2

1

A user refresh does not fire $stateChangeStart or $stateChangeSuccess. However $viewContentLoading and $viewContentLoaded does fire.

So can you try the following:

         $rootScope.$on('$viewContentLoading', function() {
                $timeout(function(){
                    element.addClass('show');
                } , 50);
          });
          $rootScope.$on('$viewContentLoaded', function() {
                $timeout(function(){
                    element.removeClass('show');
                } , 700);
          });
natdico
  • 863
  • 6
  • 11
0

Try this,
Here if you change your state you can see your state in console but if you reload your page it will reload the state

$rootScope.$on('$stateChangeStart', function (event, toState, toParams) {
    console.log("Switching To: ", toState.name);
});
ojus kulkarni
  • 1,877
  • 3
  • 25
  • 41