stateChangeStart event in Angular doesn't fire when refreshing page

Question

I have a custom directive:

export class XHideDirective {

    static $inject = ["$rootScope"];
    static $rootScope: any;

    public static build($rootScope) {
        var directive: ng.IDirective = {
            link: (scope, element, attributes: any) => {

                var itemToHide = attributes["xHide"];

                $rootScope.$on("$stateChangeStart",
                    (event, toState) => {
                        if (toState.data && toState.data.hasOwnProperty(itemToHide)) {
                            element.hide();
                        } else {
                            element.show();
                        }
                    });
            }
        };
        return directive;
    }
}

And what that does, is when a state has it, it'll hide all elements on the page with that directive set to that value.

            .state("deposit.x.successful", {
                url: "/successful/:transactionId",
                controller: "DepositResultController",
                templateUrl: "deposit/templates/x/successful.html",
                data: { hideDepositMenu: null }
            })
            .state("deposit.x.pending", {
                url: "/pending",
                templateUrl: "deposit/templates/x/pending.html",
                data: { hideDepositMenu: null }
            })
            .state("deposit.x.rejected", {
                url: "/rejected",
                templateUrl: "deposit/templates/x/rejected.html",
                data: { hideDepositMenu: null }

This all works very well except in the case when I don't transition to that page naturally but I get forwarded there (either a server redirect) or if I refresh the page with Ctrl+F5. Then the "stateChangeStart" event doesn't get hit.

The directive is registered like this:

  module Utils {
    angular.module("Utils", [])
        .directive("xHide", ["$rootScope", (r) => { return XHideDirective.build(r); }]);
     }

How do I get the state in those cases?

I found this very similar issue with no solution $stateChangeStart don't work when user refresh browser

score 0 · Answer 1 · answered Jun 21 '16 at 09:56

0

Did you try to put this listener in a .run section ?

 $rootScope.$on("$stateChangeStart",
                    (event, toState) => {
                        if (toState.data && toState.data.hasOwnProperty(itemToHide)) {
                            element.hide();
                        } else {
                            element.show();
                        }
                    });

answered Jun 21 '16 at 09:56

AsmaG

487
4
17

I've updated my question to show how I bind the directive using the .directive method. Can you elaborate where to add the .run method? Is it instead of a .directive? – Nick Jun 21 '16 at 13:39
Well, you can add your .run method anywhere. not inside of a .directive. just outisde – AsmaG Jun 21 '16 at 13:55

score 0 · Accepted Answer · answered Jun 21 '16 at 15:45

I think I solved it by doing this:

export class XHideDirective {

    static $inject = ["$rootScope", "$timeout"];
    static $rootScope: any;

    public static build($rootScope, $timeout) {
        var directive: ng.IDirective = {
            controller: DepositController,
            link: (scope, element, attributes: any) => {

                var itemToHide = attributes["xHide"];

                $timeout(() => {
                    if (scope.hideMenu && scope.hideMenu.hasOwnProperty(itemToHide)) {
                        element.hide();
                    } else {
                        element.show();
                    }
                }, 0);

                $rootScope.$on("$stateChangeStart",
                    (event, toState) => {
                        if (toState.data && toState.data.hasOwnProperty(itemToHide)) {
                            element.hide();
                        } else {
                            element.show();
                        }
                    });
            }
        };
        return directive;
    }
}

and then inside the controller:

module Deposit {
    export class DepositController extends  Utils.BaseController {  
        constructor(public $state) {
            this.$scope.hideMenu = this.$state.$current.data;
        }
    }
}

No idea if it's the optimal solution but it seems to work well so far. Hope it helps someone.

stateChangeStart event in Angular doesn't fire when refreshing page

2 Answers2