stateChangeStart события угловой не срабатывает при обновлении страницы

Question

У меня есть пользовательская директива:

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; 
    } 
} 

и что это делает, это когда государство, он будет скрывать все элементы на странице с тем, что директива, установленная для этого значения.

  .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 } 

Это все работает очень хорошо, за исключением случая, когда я не переход на этой странице, естественно, но я получаю пересылаются там (или сервер переадресации), или если я обновить страницу с помощью Ctrl + F5. Тогда событие stateChangeStart не попадает.

директива зарегистрирована как это:

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

Как получить состояние в этих случаях?

Я нашел очень похожий вопрос с не решением $stateChangeStart don't work when user refresh browser

Answer 1

Я думаю, что я решил ее сделать это:

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; 
    } 
} 

, а затем внутри контроллера:

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

Не знаю, если это оптимальное решение, но это, кажется, работает хорошо так далеко. Надеюсь, это поможет кому-то.

Answer 2

Вы пытаетесь поставить этот слушателя в разделе .run?

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