カスタム ディレクティブがあります。
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 ユーザーがブラウザを更新すると機能しません