[英]stateChangeStart event in Angular doesn't fire when refreshing page
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. 这一切都很有效,除非我没有自然地转换到那个页面但我转发到那里(服务器重定向)或者我用Ctrl + F5刷新页面。 Then the "stateChangeStart" event doesn't get hit.
然后“stateChangeStart”事件不会被击中。
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 我发现这个非常类似的问题没有解决方案$ stateChangeStart在用户刷新浏览器时不起作用
Did you try to put this listener in a .run section ? 你试图将这个监听器放在.run部分吗?
$rootScope.$on("$stateChangeStart",
(event, toState) => {
if (toState.data && toState.data.hasOwnProperty(itemToHide)) {
element.hide();
} else {
element.show();
}
});
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.
希望它可以帮助某人。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.