web-dev-qa-db-ja.com

ui.routerを使用したAngularJS：同じ状態のリンクをクリックするとページをリロードします

QAチームからリクエストがありましたが、ばかげていると思います。角度ベースのアプリですでに「about」状態/ページが表示されていて、トップメニューから「about」状態のURLをもう一度クリックすると、「about」ページを再読み込みするとします。 aboutページはどこからでもデータをフェッチしません。ちなみに、リロードは単にまばたきに相当します。

私のangularアプリの状態設定は次のようになります：

_.state('about', {
  url: '/about',
  templateUrl: '/path/to/about.html',
  controller: 'aboutCtrl as aboutView'
});
_

そして、トップメニューには、この状態を指すリンクがあります。

_<a ui-sref="about">About</a>
_

私はこれを機能させるために多くのことを試みました：リンクをクリックすると同じ状態のリロードがトリガーされます。

リンクが静的であるため、$state.go('about', {}, {reload: true});や$state.transitionTo('about', {}, {reload: true});のようなものは機能しません。

私が現在試みている最後の手段は、_'$stateChangeSuccess'_イベントをリッスンしてAngular）のrunフェーズでリロードを操作することですが、私はそれを考えていません_'about'_リンクをクリックしても、その状態になっているときに状態がまったく変化しないため、機能します。

これを回避する方法はありますか？ありがとう

javascripthtmlangularjsangular-ui-routerreload
12
TonyGW

UIルーターに付属するui-sref-optsというオプション属性があります。私は同じ問題に直面し、それはそれを解決しました。

例：<a ui-sref="home" ui-sref-opts="{reload: true}">Home</a>

ドキュメントのURL： Iルーターのドキュメント

19
Siv

そうです、私は 状態変更イベント を取得することはできません。その機能がいつかそのAPIを介して使用できるようになるまで、そしてもしそうなら、これはこれに対する半ハッキーな解決策です。 ng-clickを活用し、いくつかのばかげたロジックを使用してQAを緩和することができます（あなたの場合）。また、コントローラーの実装がわからないため、この例では、わかりやすくするために$rootScopeの.runに提案を入れましたが、必要に応じて統合してください。次の例を観察してください...

<a ui-sref="about" ng-click="sillyQA()">About</a>

.run(['$rootScope', '$state', function($rootScope, $state) {

    $rootScope.sillyQA = function() {
        if($state.current.name === 'about') {
            $state.go('about', {}, { reload: true });
        }
    }

    // -- just to see our about => about state 'change'
    $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams){
        console.log('toState:   ' + toState.name );
        console.log('fromState: ' + (fromState.name || 'Just got there! click again!'));
    })
}]);

JSFiddle Link -デモ

7
scniro