49

routeProvider を使用して、URL のコントローラーとテンプレートを定義します。

実際の場所と同じ URL を持つリンクをクリックしても、何も起こりません。reload()場所が変わっていなくても、ユーザーがそのようなリンクをクリックした場合にメソッドが呼び出されるようにしたいと思います。つまり、場所を同じ値に設定した場合、別の値に設定した場合と同じように動作するようにしたいと考えています。

それを自動的に行うように routeProvider または locationProvider を構成する方法はありますか? または、これを行うための正しいアプローチは何ですか? これは往復アプリケーションでは標準的な動作ですが、angularjs で行うにはどうすればよいですか?

グーグルグループでも質問しました。

アップデート：

この質問は多くの意見を集めているので、私がどのように問題を解決したかを説明しようと思います。

Renan Tomal Fernandes がコメントで提案したように、アプリでリンクするためのカスタム ディレクティブを作成しました。

angular.module('core.directives').directive('diHref', ['$location', '$route',
        function($location, $route) {
    return function(scope, element, attrs) {
        scope.$watch('diHref', function() {
            if(attrs.diHref) {
                element.attr('href', attrs.diHref);
                element.bind('click', function(event) {
                    scope.$apply(function(){
                        if($location.path() == attrs.diHref) $route.reload();
                    });
                });
            }
        });
    }
}]);

このディレクティブは、アプリ内のすべてのリンクに使用され、この機能が必要です。

<a di-href="/home/">Home</a>

このディレクティブが行うことは、href属性に基づいて属性を設定することです。これによりdi-href、angular は常にそれを処理でき、リンクにカーソルを合わせると URL を確認できます。さらに、ユーザーがそれをクリックし、リンクのパスが現在のパスと同じである場合、ルートをリロードします。

4

10 に答える 10

77

ルート構成で定義された URL に / (スラッシュ) を追加します

今日も同様の問題に遭遇しました。Web ページにリンクがあり、それをクリックすると、毎回 ng-view をリロードして、サーバーからデータを更新できるようにします。ただし、URL の場所が変わらない場合、angular は ng-view をリロードしません。

最後に、この問題の解決策を見つけました。私の Web ページでは、リンクの href を次のように設定しました。

  • <a href="#/test">test</a>

しかし、ルート構成では、次のように設定しました。

  • $routeProvider.when('/test/', { controller: MyController, templateUrl:'/static/test.html' });

異なるのは、url の最後のスラッシュです。href="#/test"初めてクリックすると、Angular は URL を#/test/にリダイレクトし、ng-view をロードします。2 回目にクリックすると、現在の URL が であるため、クリック#/test/したリンク ( ) の URL と等しくないhref="#/test"ため、Angular は場所の変更メソッドをトリガーし、ng-view をリロードし、さらに Angular は URL を#/test/再度リダイレクトします。次回その URL をクリックすると、Angular は再び同じことを行います。これはまさに私が欲しかったものです。

これがお役に立てば幸いです。

于 2013-07-11T08:40:28.127 に答える
64

リンクに を追加し_target='_self'て、ページを強制的にリロードすることができます。

例えば

<a href="/Customer/Edit/{{customer.id}}" target="_self">{{customer.Name}}</a>

IE および Firefox のバージョン 1.0.5 および 1.2.15 でテスト済み。

AngularJS サイトからの詳細情報は次のとおりです。

HTMLリンク書き換え

HTML5 履歴 API モードを使用する場合、ブラウザごとに異なるリンクが必要になりますが、次のような通常の URL リンクを指定するだけで済みます。

<a href="/some?foo=bar">link</a>

ユーザーがこのリンクをクリックすると、

  • 従来のブラウザーでは、URL が次のように変わります。/index.html#!/some?foo=bar
  • 最新のブラウザーでは、URL が次のように変わります。/some?foo=bar

次のような場合、リンクは書き換えられません。代わりに、ブラウザは元のリンクへのページ全体のリロードを実行します。

  • ターゲット要素を含むリンク 例:<a href="/ext/link?a=b" target="_self">link</a>

  • 別のドメインに移動する絶対リンク 例:<a href="http://angularjs.org/">link</a>

  • base が定義されている場合に別の base パスにつながる「/」で始まるリンク 例:<a href="/not-my-base/link">link</a>

于 2013-03-08T09:51:41.007 に答える
21

リロードを強制するには$route.reload()を使用する必要があります。

これを行う「自動」の方法があるかどうかはわかりませんが、これらのリンクで ng-click を使用できます

于 2012-06-29T18:59:23.580 に答える
8

AngularUI Routerを使用している人向け。次のようなものを使用できます。

<a data-ui-sref="some.state" data-ui-sref-opts="{reload: true}">State</a>

reload オプションに注意してください。

ここで答えを見つけました: https://stackoverflow.com/a/29384813/426840

于 2015-09-25T14:22:41.650 に答える
6

@Renan Tomal Fernandesからの回答。以下は例です

HTML

<a href="#/something" my-refresh></a>

JS

angular.module("myModule",[]).
directive('myRefresh',function($location,$route){
    return function(scope, element, attrs) {
        element.bind('click',function(){
            if(element[0] && element[0].href && element[0].href === $location.absUrl()){
                $route.reload();
            }
        });
    }   
});
于 2013-10-01T07:25:14.803 に答える
0

私の場合、URLが同じであれば、$route.reload()、$location.path()、$state.transitonTo()などを含め、何も機能しませんでした.

したがって、私のアプローチは、次のようにダミーページを使用することでした。

if( oldLocation === newLocation ) {
   // nothing worked ------------
   // window.location.reload(); it refresh the whole page
   // $route.reload();
   // $state.go($state.$current, null, { reload: true });
   // $state.transitionTo($state.current, $stateParams, {reload:true, inherit: false, notify: false } );
   // except this one
   $location.path('/dummy'); 
   $location.path($location.path());
   $scope.$apply(); 
}

'/dummy' モジュールをどこかに作成する必要があります。モジュールは何もしません。次の $location.path() を適用できるように URL を変更するだけです。$scope.$apply() をお見逃しなく

于 2014-07-03T22:33:16.270 に答える
0

ディレクティブアプローチを使用して、上記の Wittaya のソリューションを試しました。どういうわけか、ディレクティブはエラーをスローし続けます。私はこの解決策で終わります

HTML

<a href="javascript:void(0)" data-ng-click="stateGo('devices')">Devices</a>

コントローラ

    $scope.stateGo = function (stateName) {
        if ($state.$current.name === stateName) {
            $state.reload();
        } else {
            $state.go(stateName);
        }
    }
于 2016-09-14T19:30:58.257 に答える
-3

これを追加してみました

$(window).on('popstate', function(event) {
//refresh server data
});

そしてそれはうまくいきます

于 2015-02-20T04:09:00.363 に答える