刷新页面时不会触发 Angular 中的 stateChangeStart 事件答案

【问题标题】：stateChangeStart event in Angular doesn't fire when refreshing page刷新页面时不会触发 Angular 中的 stateChangeStart 事件
【发布时间】：2024-05-04 09:55:02
【问题描述】：

我有一个自定义指令：

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

【问题讨论】：

标签： angularjs angularjs-directive angular-ui-router angularjs-events

【解决方案1】：

您是否尝试将此侦听器放在 .run 部分中？

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

【讨论】：

我已经更新了我的问题，以展示我如何使用 .directive 方法绑定指令。你能详细说明在哪里添加 .run 方法吗？它不是 .directive 吗？
好吧，你可以在任何地方添加你的 .run 方法。不在 .directive 内。只是在外面

【解决方案2】：

我想我通过这样做解决了它：

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

不知道这是否是最佳解决方案，但到目前为止它似乎运作良好。希望它可以帮助某人。

【讨论】：