Angular.js: ルートをリロードせずにハッシュ/パスを変更できるようにする$ locationのオプション

+1、同じ問題があります。

@cgross $ locationサービスはJQueryスタイルのメソッドチェーンを使用し、すべてのコマンドは$ digestまで延期されるため、reload（boolean）などの新しいチェーンメソッドを追加することをお勧めします。

$location.path("/thing/"+thing.id).replace().reload(false)

PSこれはEclipse星雲プロジェクトを開始したクリスグロスですか？

うん ：）

+1：+1：

+1

現在、この問題を回避するためにダーティハックを使用しています。

    $scope.$on('$locationChangeSuccess', function(event) {

        // Want to prevent re-loading when going from /dataEntry/1 to some other dataEntry path
        if ($route && $route.current && $route.current.$route.templateUrl.indexOf('dataEntry') > 0) {
            $route.current = lastRoute; //Does the actual prevention of routing
        }
});

+1

+1

+1

+1

+1

preventDefault()に対して$routeChangeStart preventDefault()をサポートすることにより、これを修正する私の試みは次のとおりです。 あれについてどう思う？
コミット： https ：

私は数日間@qualidafialアプローチに取り組んできましたが、これでPRの準備が整いました。 場所の変更通知を一度スキップできる新しいnotifyメソッドを作成しました。 これにより、ルートの変更やリロードがトリガーされないようにする必要があります。

これはルーティングシステムに影響を与えないため、ルート定義を変更する必要はありません。 標準のAngularJSルーティングシステムの代わりにui-routerを使用しても、引き続き機能します。

例： $location.path('/client/2').replace().notify(false);

また、いくつかのテストとドキュメントのビットを処理しました。

+1

別の+1
すでに@lrlopezのプルリクエストを使用しています。 チャームのように機能します。

+1

+1

残念ながら、PR https://github.com/angular/angular.js/pull/2398は、通知をスキップすると実際のURLと現在のルートの間に不整合が生じる可能性があるため、Angularチームによって拒否されました。 議論の終わりに長い説明があります。

この機能はどのプロジェクトにも必要ありませんが、必要に応じてマージできるように、リポジトリに保持します。 変更をリベースできるように、マスターブランチと同期しなくなった場合はお知らせください。 ありがとう！

+1

+1、これが必要です:(

+1

編集：ここでより良いアプローチ： https ：

これを回避するために再利用可能なファクトリを作成しました（@shahmirnのアイデアに基づいています）。

/**
 * HACK Do not reload the current template if it is not needed.
 *
 * See AngularJS: Change hash and route without completely reloading controller http://stackoverflow.com/questions/12115259/angularjs-change-hash-and-route-without-completely-reloading-controller
 */
app.factory('DoNotReloadCurrentTemplate', ['$route', function($route) {
  return function(scope) {
    var lastRoute = $route.current;
    scope.$on('$locationChangeSuccess', function() {
      if (lastRoute.$$route.templateUrl === $route.current.$$route.templateUrl) {
        console.log('DoNotReloadCurrentTemplate not reloading template: ' + $route.current.$$route.templateUrl);
        $route.current = lastRoute;
      }
    });
  };
}]);

使い方：

app.controller('MyCtrl',
  ['$scope', 'DoNotReloadCurrentTemplate',
  function($scope, DoNotReloadCurrentTemplate) {

  DoNotReloadCurrentTemplate($scope);
}]);

ソース： http ：

ルートで「reloadOnSearch」をfalseに設定すると、ページ全体を再読み込みするハッシュの変更が修正されたようです。

+1

これは、ng-viewの作成/破棄のライフサイクルが適切でない（パフォーマンスと使いやすさを損なう）モバイルアプリに最適です。

@tkrotoff例をありがとう。 回避策はイベント通知をキャンセルするため、ルートスコープにブロードキャストを追加して、他のコントローラーにルート変更を通知できるようにしました。

/**
 * HACK Do not reload the current template if it is not needed.
 *
 * See AngularJS: Change hash and route without completely reloading controller http://stackoverflow.com/questions/12115259/angularjs-change-hash-and-route-without-completely-reloading-controller
 */
app.factory('DoNotReloadCurrentTemplate', ['$route', '$rootScope', function($route, $rootScope) {
  return function(scope) {
    var lastRoute = $route.current;
    scope.$on('$locationChangeSuccess', function() {
      if (lastRoute.$$route.templateUrl === $route.current.$$route.templateUrl) {
        console.log('DoNotReloadCurrentTemplate not reloading template: ' + $route.current.$$route.templateUrl);
        $rootScope.$broadcast('locationChangedWithoutReload', $route.current);
        $route.current = lastRoute;        
      }
    });
  };
}]);

それで：

app.controller('MyCtrl',
  ['$scope', 'DoNotReloadCurrentTemplate',
  function($scope, DoNotReloadCurrentTemplate) {

  DoNotReloadCurrentTemplate($scope);

  $rootScope.$on('locationChangedWithoutReload', function(event, route) {
    // set location specific breadcrumbs
    $scope.breadcrumbs = assembleBreadCrumbs();

    // do something for specific route
    if (route.$$route.action == 'item') {
      $scope.item = $scope.items[params.itemId];
      $rootScope.title = $scope.item.name;
    }
  });
}]);

トピックの作成者が持っているのと同じ問題があり、上記のソリューションの修正バージョンを作成しました。

app.factory('skipReload', [
    '$route',
    '$rootScope',
    function ($route, $rootScope) {
        return function () {
            var lastRoute = $route.current;
            var un = $rootScope.$on('$locationChangeSuccess', function () {
                $route.current = lastRoute;
                un();
            });
        };
    }
]);

使用法：

app.controller('ThingCtrl', ['$scope', '$http', '$location', 'skipReload', function ($scope, $http, $location, skipReload) {
    ...
    $scope.submit = function () {
        ...
        $http.post('thing', thing).success(function (id) {
            skipReload();
            $location.path('/thing/' + id).replace();
        });
    };
}]);

templateUrlをテストしてルートのリロードを許可するかどうかを決定する永続的なイベントリスナーを使用すると、同じtemplateUrlを使用する他のビューへのルーティングが中断される可能性があります。 たとえば、/ things / newにルーティングすると、最後に追加されたthing / things / 5へのリンクが表示され、thing 5やその他のthingに移動できなくなります（ブラウザでURLを明示的に変更しても）。 templateUrlテストのもう1つの問題は、テンプレートプロパティを（文字列または関数として）使用してテンプレートを指定できることです。

このハックにより、ルートのリロードを1つだけスキップでき、ルーティングが中断されることはありません。

また、（コントローラーで使用するための）冗長性の低いソリューションを試しました。

app.factory('location', [
    '$location',
    '$route',
    '$rootScope',
    function ($location, $route, $rootScope) {
        $location.skipReload = function () {
            var lastRoute = $route.current;
            var un = $rootScope.$on('$locationChangeSuccess', function () {
                $route.current = lastRoute;
                un();
            });
            return $location;
        };
        return $location;
    }
]);

app.controller('ThingCtrl', ['$scope', '$http', 'location', function ($scope, $http, location) {
    ...
    $scope.submit = function () {
        ...
        $http.post('thing', thing).success(function (id) {
            location.skipReload().path('/thing/' + id).replace();
        });
    };
}]);

正常に動作しているようです。

+1

@ sergey-buturlakinあなたの$ location.skipReloadは素晴らしいです！ DoNotReloadCurrentTemplateの代わりに使用します

@ sergey-buturlakinあなたの解決策は私のために働いているようです。 ありがとう！

https://github.com/angular/angular.js/issues/1699#issuecomment -22511464からskipReload()を実行した後、リロードが無効になり続けます
un()は後で呼び出す必要があるようです

次のリロードを防ぎ、パス変更の直前に呼び出す必要があります。
パスの変更が終了すると、「un」が呼び出されます。

はい、しかし私はリロードを一度だけスキップしたかったのですが、提案されたアプローチはそれ以上のリロードを防ぎます

+1

+1

+1

PRhttps ：//github.com/angular/angular.js/pull/2398はリロードを1回だけスキップします。 現在のマスターとのマージの競合があるかどうかはわかりません。 その場合は、私に連絡してください。修正します。

私はsergeyのソリューションを使用し、役に立たない（私によれば）「un」変数を削除して呼び出します。

これはにつながります：

  angular.module('services.locationChanger', [])
    .service('locationChanger', ['$location', '$route', '$rootScope', function ($location, $route, $rootScope) {

        this.skipReload = function () {
            var lastRoute = $route.current;
            $rootScope.$on('$locationChangeSuccess', function () {
                $route.current = lastRoute;
            });
            return this;
        };

        this.withoutRefresh = function (url, doesReplace) {
            if(doesReplace){
                $location.path(url).replace();
            }
            else {
                $location.path(url || '/');
            }
        };
    }]);

および発信者：

 locationChanger.skipReload().withoutRefresh("/", true);

+1

+1

+1

+1

@ mica16 un変数は、イベントのバインドを解除するために使用されていませんか？

私は、テストのための2つのplunkrsを作成したとし、なしunイベントをアンバインドする変数と、それなしでイベントが何度も何度も発射し、維持しているようです

はい、確かに、 un変数は奇妙に聞こえます。
元の作者によると、それは有用であると考えられます。しかし、私はそれが完璧な解決策であるとは確信していません。

私はそれを書き直すことを好みました、しかし私はそれをもう期待しないので機能をゴミ箱に捨てました。

したがって、単体テストで期待どおりに機能することを確認できる場合は、それを使用してください:)

あなたは正しい人です
私の解決策は

app.factory 'location', ['$location', '$route', '$rootScope', '$timeout', ($location, $route, $rootScope, $timeout) ->
  $location.skipReload = ->
    lastRoute = $route.current
    un = $rootScope.$on('$locationChangeSuccess', ->
      $route.current = lastRoute
    )
    $timeout((->
      un()
    ), 1000)
    $location

  $location
]

その後、コントローラーで

location.skipReload().path('/new/path').replace()

+1

+1

+1

+1

これを行う別の方法は、現在のjavascriptの「ステップ」から外して、routeがwindow.locationに加えられた変更を認識しないようにすることです。

setTimeout(function() {
    window.location.hash = "";
    if (typeof (history.pushState) !== "undefined") {
        history.pushState("", document.title, location.pathname);
    }
}, 0);

+1

+1

+1

+1

$ anchorScrollを使用するのはどうですか？ 私はネットを突っついていましたが、これを行うためのツールがいくつかあることがわかりました。 少なくとも私にとってはうまくいきます。

http://docs.angularjs.org/api/ngで確認する必要があり

+1

これは悪い考えですか？ 私はそれを広範囲にテストしていないことを認めます。 パスを設定する前に別のメソッドを呼び出すというアイデアは好きではありませんでした。 使用法の観点からは、少なくともこれはよりクリーンに見えます。

sergeyの手法を使用して、組み込みの$ location.path関数を拡張しました。

App.run(['$route', '$rootScope', '$location', function ($route, $rootScope, $location) {
        var original = $location.path;
        $location.path = function (path, reload) {
            if (reload === false) {
                var lastRoute = $route.current;
                var un = $rootScope.$on('$locationChangeSuccess', function () {
                    $route.current = lastRoute;
                    un();
                });
            }

            return original.apply($location, [path]);
        };
    }])

使用法：

$location.path('/my/path', false);

+1

@EvanWinstanleyソリューションは私のために働きます、ありがとう！

+1

@ EvanWinstanley / sergeyの修正は見栄えがよく、コントローラーをリロードしませんが、ルートを変更すると、解決が再度要求されます。

これの私の主な使用例は、resolves / controllerをリロードせずに、$ location.pathを手動で変更することです。これにより、キャッシュを実行できるようになります。

例：ユーザーが複数のアプリケーションから選択できるようにするselectがあります。これにより、$ location.pathがより適切なURLに変更されます。 ユーザーがアプリケーションを選択すると、API呼び出しの結果がキャッシュされます。 修正しても、常に解決が再実行されます。これは、結果がすでにキャッシュされているため不要です。

+1

@ sergey-buturlakinソリューションは私にとっては正常に機能します。コントローラーをリロードしませんが、reslove関数をリロードし、サーバーにリクエストを送信します。

+1

@EvanWinstanleyのソリューションは私には機能していません。 一方、 @ mica16のソリューションはうまく機能しすぎました...（戻るボタンはページを更新しませんでした）。 私は成功せずに自分のバージョンを書き込もうとしました:(。

+1

+1

+1

+1
サポートしてください：$ location.reload（）;

@jvmvik $route.current.reload()を試しましたか？

7.1.1

1年以上経ってもこれについてのニュースはありませんか？

+1

+1

Sergeyのソリューションを少し改善しました。
これで、ページ全体をリロードせずに、たとえばタブのカスタムURL（タブのナビゲート）をサポートするようになりました。

// Original: https://github.com/angular/angular.js/issues/1699#issuecomment-22511464
//
// Usage:
//
// (interception is needed for Back/Forward buttons to work)
//
// location.intercept($scope._url_pattern, function(matched) {
//   // can return false to abort interception
//   var type = matched[1]
//   if (!type) {
//     return;
//   }
//   $scope.safeApply(function() {
//     $scope.data_type = type; 
//     $scope.params.page = 1; 
//     $scope.get_data(); 
//   });
// });
// 
// anywhere in your controller: 
// location.skipReload().path(url);
//
// to replace in history stack:
// location.skipReload().path(url).replace();

app.factory('location', [
    '$location',
    '$route',
    '$rootScope',
    function ($location, $route, $rootScope) {
        var page_route = $route.current;

        $location.skipReload = function () {
            //var lastRoute = $route.current;
            var unbind = $rootScope.$on('$locationChangeSuccess', function () {
                $route.current = page_route;
                unbind();
            });
            return $location;
        };

        if ($location.intercept) {
            throw '$location.intercept is already defined';
        }

        $location.intercept = function(url_pattern, load_url) {

            function parse_path() {
                var match = $location.path().match(url_pattern)
                if (match) {
                    match.shift();
                    return match;
                }
            }

            var unbind = $rootScope.$on("$locationChangeSuccess", function() {
                var matched = parse_path();
                if (!matched || load_url(matched) === false) {
                  return unbind();
                }
                $route.current = page_route;
            });
        };

        return $location;
    }
]);

+1

+1

$ locationパスを変更するときにルートが再ロードされないようにする別の回避策は、現在のルートpathParamsを新しいロケーションパスと一致するように設定することです。

$ routeProvider構成には、次のように/ tasksへのルートがあります。

when('/tasks/:section/:taskId?', {
      templateUrl: 'partials/tasks.html',
      controller: 'TaskCtrl',
      reloadOnSearch: false
      })

上記のルートには、2つのpathParamsセクションとtaskId（taskIdはオプション）があり、reloadOnSearchはfalseに設定されています。

ルートをリロードせずに/ tasks / inboxから/ tasks / inbox / 122に移動するには、次のように$ locationパスを変更する前にtaskIdpathParamを設定します。

$scope.showTask = function(task) {
    // set taskId to prevent route reloading
    $route.current.pathParams ['taskId'] = task.id;
    $location.path('/tasks/'+$route.current.pathParams ['section']+'/'+task.id);
};

セクションpathParamはルートによってすでに設定されているため、設定する必要がないことに注意してください。

新しい$ locationパスから抽出されたpathParamsが現在のルートpathParamsと一致することをルートが検出すると（そしてreloadOnSearchがfalseに設定されている場合）、ルートはリロードされず、代わりに$ routeUpdateイベントが発生します。

ルートをリロードせずに/ tasks / inbox / 122から/ tasks / inboxに戻るには、次のように$ locationパスを変更する前に、taskIdpathParamを削除します。

$scope.back = function () {
    // delete taskId to prevent route reloading
    delete $route.current.pathParams ['taskId'];
    $location.path('/tasks/'+$route.current.pathParams ['section']);
};

+1

+：100：

バックボーンルーターに関するDerickBaileyの記事http://lostechies.com/derickbailey/2011/08/28/dont-execute-a-backbone-js-route-handler-from-your-code/を読みましたか？ バックボーンはこのオプションを提供し、Derickによれば、リロードのトリガーを常に回避する必要があります（これは、angularのルーターがここで行うように見えることとは逆のようです）。
この投稿には48個の「+1」があります...これらすべての人が何か間違ったことをしているとは思いません。 var lastRoute = $route.current;を保存し、後で$locationChangeSuccessで$route.current = lastRoute;を使用して復元する必要があるのは、かなりハッキーなようです。
@IgorMinar何か考えはありますか？

OK私は来週このトピックを所有しているので、ようやくこれを閉じることができます。

まず最初に、＃hash値が変更されたときにルートがリロードされるべきではないと思います。

website.com/#/my-route#top

website.com/#/my-route#bottom

したがって、topがbottomに変更された場合、リロードする必要はありませんが、my-route値が変更された場合は、リロードする必要があります。 私たちは皆、この権利に同意できますか？

次に、より重要なことですが、ルートパスが変更されたときにリロードされないことを簡単に指摘する方法が必要ですが、ルートの以前のフラグメントが変更された場合、これは問題になります。 では、2つの::コロンを使用して、ルートパラメータの表記を変えて、ワイルドカード値のように機能することを示してはどうでしょうか。

// this will reload the page when the id changes like normal
$routeProvider.register('/users/:id')

// this will reload the page when the id changes, but not the section (since two colons are used)
$routeProvider.register('/users/:id/::section')

皆さんはどう思いますか？

これは、移動したい状況では実際には役に立ちません。

/users/new

に

/users/123

新しいユーザーが作成され、IDが割り当てられると、ユーザーは既に存在するため、ユーザーをリロードする必要はありません。

どういうわけか、新しいユーザーオブジェクトをID 123の現在のユーザーオブジェクトにマップする必要があるためです。これは、アプリケーション固有ではありませんか？

Ember Routerは、移行せずにURLを変更することをサポートしていません。

http://stackoverflow.com/questions/19076834/change-url-without-transition

@matskoエンジニアに権限を与えて、ルートが変更をトリガーするかどうかをエンジニアに決定させることはできますか？
私は良いデフォルトで大丈夫です。
エンジニアがリロードイベントのチェーン全体を実行せずにURLを変更できるようにする方法を作成します。 個人的には、「。path（）」、「。search（）」などにオプション（例：{reload：false}）を含むオプションの追加パラメーターを追加しても問題ありません。

@ChrisCinelliはい。ただし、ルート定義に2つの

@matskoでは、実装の最後に、どのパラメーターがリロードを引き起こし、どのパラメーターがリロードを引き起こさないかを選択できると考えられていますか？ もしそうなら、あなたはすでにアプローチを考えていますか、それとも私たちが問題にぶつかっているところですか？

@ cgrosscherry-はいを選択します（二重コロンを使用）。 これは今のところ単なるアイデアなので、具体的なことは何もありません。 これがAngular2.0の計画と一致している場合は、それを使用するか、2.0が計画しているものまたはDartがすでに持っているもの（APIの一貫性を保つため）を使用しようとすることができます。

私はそれが完璧だと思います、そしてルートの一部として（少なくともIMO）見栄えがするでしょう。

$routeProvider,when("/:categoryName/:id[reload=no]", { ... })

そして、コントローラーで

$scope.$on("$routeChangeSuccess", function () {
  if ($routeParams.id !== $scope.activeId) {
    // React to ID update without reload
  }
});

はい、そのようなものですが、 :id[reload=no]代わりに二重コロン ':: id'が使用されます。

これは単なるアイデアですが、ここの多くの人々はこの機能を望んでいることを覚えておいてください。

最終的には他のオプションを追加することを考えていましたが、他に可能なオプションは実際にはないと思います。 このリクエストが真剣に受け止められているのも良いことです。 きれいなURLは、私たちの多くにとって大きな問題です。

二重コロンの場合はMatsko + 1ですが、上記のいくつかのエッジケースについても、path（）にオプションを渡すことができると便利だと思います。

ダブルコロンの場合は+1

@matskoから、 検討するように求められました。 ng1.xでこれを必要としている人には役に立たないことは知っていますが、興味深いかもしれないと思いました。

新しいルーターにはnavigateメソッドがあり、このメソッドに_url_オブジェクトとオプションの_options_オブジェクトを渡すことができます。 それは2つのオプションがサポートされていてこれは、バックボーンルータの履歴機能に基づいていますreplaceとtriggerあなたがからに行きたい場合は/users/newに/users/123なし画面ナビゲーションを発生させるには、 trigger:false指定するだけです。 また、 /users/new履歴エントリを新しいIDベースのURLに置き換えたい場合は、 replace:trueも指定します。

DOM変換などを行わずにルートを_new_ルートから_idベース_ルートに更新することは、このAPIの主要なユースケースです。 もう1つの一般的な例は、ページ付けです。 たとえば、グリッドがあり、ユーザーにデータをページングさせたい場合は、これを使用して、ナビゲーションを行わずにフラグメントを現在のページ情報で更新できます。 他にも用途があると思いますが、これは私が長年コンサルティングで繰り返し見たものです。

この情報がお役に立てば幸いです。 おそらく、1.xルーターはこの手法を採用できますか？

@EisenbergEffectなので確認してください。 1.xの場合、パスを変更せずにこれを行う方法は次のようになります。

$location.path(value, { trigger : false })

そして、これにより、新しいルート+コントローラーが認識されることなく、パスが効果的に置き換えられます。 これは今のところうまくいくかもしれませんが、ダブル::コロンのアイデアについてどう思いますか？

ここにいる他のすべての人にとって、URLの変更（ルートをリロードせずに）をルートを介して、またはURLが変更されたときに開発者が容易にすることをお勧めしますか？

サービスのように、場所の信頼できる唯一の情報源が必要です。
ルートとブラウザは、参照と影響の両方を行うことができますが、単一のままです
真実
2014年7月1日午後11時28分、「MatiasNiemelä」 [email protected]は次のように書いています。

@EisenbergEffecthttps ：//github.com/EisenbergEffectそう確認して
1.x、パスを変更せずにこれを行う方法は次のようになります。

$ location.path（value、{trigger：false}）

そして、これは新しいルートを引き起こすことなくパスを効果的に置き換えるでしょう

• 気付くコントローラー。 これは今のところうまくいくかもしれませんが、どう思いますか
  ダブル::コロンのアイデアについて？

ここにいる他のすべての人にとって、URLを変更したいですか（
ルートのリロード）は、ルートを介して、または開発者によって促進されます
URLが変更されたとき？

—
このメールに直接返信するか、GitHubで表示してください
https://github.com/angular/angular.js/issues/1699#issuecomment-47741350 。

別のアイデアがあります...各ルート定義で2つの新しいメソッド、たとえばentering(transitionInfo)とleaving(transitionInfo)などを許可します。 それらが存在する場合、 leavingメソッドは出発する前に古いルートで呼び出され、次にentering()メソッドが新しいルートで呼び出されます。 transitionInfoは、次のようなオブジェクトになります。

{
  newUrl: ...
  newRoute: ...
  oldUrl: ...
  oldRoute: ...
  cancelRouteChange: false,
  ignoreRouteChange: false
}

この方法では、新旧のルート/ URLを確認し、URLを変更したいがルート遷移を再実行しない場合は、 ignoreRouteChangeをtrueます。 ルート変更をキャンセルして前のルートにロールバックする場合は、 cancelRouteChangeをtrueに設定します。

これにより、開発者はルート遷移がいつ発生するかを完全に制御でき、URLがアドレスバーで直接変更された場合に機能し、変更を気にする個々のルートの定義に近い特定のルート変更を決定する機能も見つけられます。

activate()と呼ばれるAngularV2ルーターにも似たようなものがあると思います。 @EisenbergEffect確認できますか？

どう思いますか？

@matskoはい、そのAPIはそのように見える可能性があります。 replaceオプションの実装も検討することをお勧めします。これも頻繁に必要になるためです。 この特定のケースでは/users/newに/users/123あなたが実際にはしたくないので、私は両方のオプションを活用すると思うだろう/users/new新しいユーザーがされた後、バックスタックに残ります作成した。

::に関しては、それが完全に役立つかどうかはわかりません。 その理由は、上記のユーザーの例では、重要なのはURLパターンではなく、特定のアプリケーションコンテキストであるためです。 たとえば、 customersからusers/123移行する場合は、通知する必要があります。 また、 users/newを放棄してusers/456に移動した場合も、通知する必要があります。 users/newにいて、新しいユーザーの作成が完了した場合にのみ、遷移を発生させずに、新しく作成されたユーザーのIDを表すようにフラグメントを更新するだけです。 これは、その時点でそのユーザー画面のコンテキスト内でユーザーが実際に何をしているかに大きく依存します。

@petebacondarwinそのアイデアの1つの問題は、ルート通知の許可に関する知識が、ルート定義とともにグローバルに利用できるものではないということです。 むしろ、特定のユーザーコントローラーに埋め込まれています。これは、そのコントローラーが、新しいユーザー画面から既存のユーザーに移動するのではなく、現時点で新しいユーザーが実際に作成されているかどうかを知るコードの一部であるためです。

私にとっての道は、ルートを変更したい発信者に制御を与えることです。 だから私は間違いなく2つのオプションreplaceとtriggerに賛成です。

@ EisenbergEffect-その通りです。 一般に、この情報はすぐには利用できませんが、次のように実装することを想像します。

currentUserというサービスがあります。このサービスには、現在作業しているユーザーが含まれています。 私はコントローラーをコードでオーバーロードすることに慣れていないので、これを一般的に行うのが好きです。 これが具体的すぎると感じた場合は、 currentEntityを使用できます。これは、編集/表示している現在の「もの」です。

次に、ルートenter()メソッドでこれを注入し、このルートに移動すると現在のエンティティが実際に変更されるかどうかを判断できます。 そうでない場合は、わざわざトランジションを実行する必要はありません。代わりにURLを更新してください。

これは大きなアプリでは少し扱いに​​くくなる可能性があることを感謝していますが、オプションとしてそこに捨てると思いました。

呼び出し元（つまり、ルート/ URLの変更を要求する呼び出し元）に、ルート遷移が実際に発生するかどうかの制御を与えることに反対する議論は何ですか？ @IgorMinarは、これにより、アプリケーションの1つの状態が1つのURLに直接マップされ、ルートを再実行せずにURLを変更できるようにすると、アプリケーションがあなたがそこに到着した方法。

@petebacondarwinこれはこの特定のシナリオでは機能する可能性がありますが、前述のページネーションの例を処理するのは少し

状態の問題に対処するには、もう少し複雑です。 その理由は、同じコントローラーの状態を表す2つのURLがあるためです。ただし、違いはモデルにあります。 したがって、実際には2つの異なる状態があります。しかし、UXの観点からは、移行を行う際にユーザーを驚かせたくありません。 パフォーマンスの観点から、DOMを不必要に破棄してすべてを再作成することは望んでいません。 したがって、新しいユーザー=>保存されたユーザー遷移の場合、トリガーを回避し、フラグメントを置き換えて、戻るボタンで新しいユーザー画面に戻らないようにします。 内部的には、ルーターまたはロケーションメカニズムは、現在のフラグメントが何であるかを追跡する必要があります。 （この点でng1.xがどのように機能するかわからないため、ここで少し仮定しています。2.xでは、変更方法に関係なく、現在/前のフラグメントを注意深く追跡するようにしています。）ページングシナリオでは、データをページングするための優れたUXが必要であり、不必要なDOMの破棄が必要ないため、トリガーしたくありません。 ただし、ユーザーが戻るボタンを使用してデータのページを逆方向に移動できるように、前のフラグメントを保持する必要があります。

どちらの場合も、アプリのURLと状態だけでなく、現在の状態から新しい状態に移行する方法も重要であることに注意してください。 新しいビューに直接ディープリンクする場合、これは重要ではありません。 これらの非常に特殊なケースのコンテキスト内で、ある場所から別の場所に移動する場合は重要です。

+1

+1

+1

+1
また、ルートを変更せずにURLを変更する機能もあります

+ 1-私だけがこれを望んでいないのを見てうれしいです！

+1、まだ追加していません（

+1

+1

+1

+1

+1

+1

+1

：+1：

あなたも@basarat？ ：笑顔：

@johnnyreillyには、 $routeと$locationを注入するサービスがあり、次の関数を使用できます。

/** navigate */
    public navigate(url: string, reload = true) {
        this.$location.url(url);

        // Don't do a controller reload on this navigation. Note: *you* need to be careful not to actually *need* a controller reload
        if (!reload) {
            var lastRoute = this.$route.current;
            var unsub = this.$rootScope.$on('$locationChangeSuccess', () => {
                this.$route.current = lastRoute; // fake this to make the route logic think nothing changed
                unsub();
            });
        }
    }

素敵な@basarat！

+1

+1

現在のソリューションで気付いていることの1つは、ルーター解決ブロックがまだ実行されていることです。 他の誰かがこれに気づきましたか？ $ route.currentオブジェクトに何かを渡すのは簡単でしたが、それはハッキーのようです。 また、この問題は決して修正されないようですか？ ：泣く：

+1

+1

スクロールバックする必要がない人のために...私が知る限り、これは私たちがこれまでに持っているものです（申し訳ありませんがコーヒースクリプト）。 残念ながら、これは私にとって100％機能していません。 まだresolve実行されており、戻る/進むボタンが壊れているようです。

#
# Special $location.path function that allows you to change the url, but not
# send things through the router.
# <strong i="7">@see</strong> https://github.com/angular/angular.js/issues/1699
#
@app.run(['$rootScope', '$location', '$route', '$timeout', ($rootScope, $location, $route, $timeout) ->

    originalPath = $location.path

    $location.path = (url, reload=true) ->
        if ! reload
            lastRoute = $route.current
            if lastRoute
                unsub = $rootScope.$on('$locationChangeSuccess', ->
                    $route.current = lastRoute # fake this to make the route logic think nothing changed
                    $route.current.ignore = true
                    unsub()
                )
                # make sure to clean up and unregister the unsub function
                $timeout( ->
                    unsub()
                , 500)

        originalPath.apply($location, [url])

])

@lookfirstは、 unsub 2回呼び出しています。 優先： https ：

@basarat肩をすくめる...お好みの例でunsub（）が常に呼び出されているとは限らないことがわかったので、これを追加しました。 たぶん、unsub関数にガードを追加するのが最善でしょう。

unsubbed = false
unsub = ... ->
    if ! unsubbed
        ...
        unsubbed = true
        unsub()

$timeout(unsub, 500)

とにかく、この解決策は完全に混乱しています。 それはあらゆる種類のものを壊します。 角度のある承認済みの修正が本当に必要です。

unsub（）があなたの好みの例で常に呼び出されているわけではないことがわかったからです

@lookfirstあなたはlocation.pathを使用しています私はlocation.urlます。 それはそれに影響を与える可能性があります。

ただ、つべこべ（私が役に立つことが好き）：代わりにoriginalPath.apply($location, [url])あなたが行うことができますoriginalPath.call($location, url) （あなたはこれをすでに知っているかもしれません）

興味深い... location.urlの方がはるかにうまく機能しますが（戻るボタンが再び機能します！）、私の側で別の問題を引き起こしているようです。 10時間連続でコーディングしていない場合は、これをさらに掘り下げる必要があります。 ポインタとディスカッションを本当にありがとう！

+1

+1

+1

@kuchumovnあなたの解決策は素晴らしいです。 私が得た問題の1つは、パスが変更されても$routeParamsが変更されないことです。 イベントリスナー内の$routeParamsの値を置き換えることで、これを解決しました。 これが正しい方法かどうかはわかりませんが、私にとってはうまくいきます。

app.factory('Location', [
    '$location',
    '$route',
    '$rootScope',
    '$routeParams',
    function ($location, $route, $rootScope, $routeParams) {
        var page_route = $route.current;

        $location.skipReload = function () {
            //var lastRoute = $route.current;
            var unbind = $rootScope.$on('$locationChangeSuccess', function () {
                angular.copy($route.current.params, $routeParams);
                $route.current = page_route;
                unbind();
            });
            return $location;
        };

        if ($location.intercept) {
            throw '$location.intercept is already defined';
        }

        $location.intercept = function(url_pattern, load_url) {

            function parse_path() {
                var match = $location.path().match(url_pattern);
                if (match) {
                    match.shift();
                    return match;
                }
            }

            var unbind = $rootScope.$on("$locationChangeSuccess", function() {
                var matched = parse_path();
                if (!matched || load_url(matched) === false) {
                  return unbind();
                }
                angular.copy($route.current.params, $routeParams);
                $route.current = page_route;
            });
        };

        return $location;
    }
]);

+1

+1

私は昨日@IgorMinarとました...彼は、将来はAngular 2.0のルーターであり、まもなく1.3に移植されると言っています。 考慮すべきこと...

なぜui-routerをAngularにマージしたいのですか？
uuiルーターは、必要なものは何でも解決しているようです。

@elennaroに同意します。 ui-routerは、それを機能させるためにある程度の創造性と研究を必要としますが、私が遭遇したすべてのシナリオでそのトリックを実行します。 ui-routerを採用し、それにgoogleリソースを投入することの欠点は何ですか？

解決策のどれも解決を実行しないようです、何かアイデアはありますか？

+1

+1

$location.path(value, { trigger : false }) +1
これについて何か進展はありますか？

+1

+1

+1完全に別の方法はどうですか？ path（）をそのままにして、コントローラーをリロードせずにブラウザーのURLを変更するだけの$ location.hashメソッドを追加するだけです。 これにより、ブラウザのバックナビゲーションを制御でき、リッチアプリケーションでの有効なユースケースシナリオです。

+1

現在、このページでスニペットを使用しています： http ：

+1

+1

+1

私が見つけた回避策は、絶対URLを使用して子状態を追加することでした。

$stateProvider.state('state.child', {
    url: '^/some-other-url'
});

次に、$ state.go（ '。child'）を実行するだけで、URLをリロードせずに必要なものに変更し、全員を満足させることができます。 キャレットは、URLが親から継承されないことを示していることに注意してください。これを理解するのにしばらく時間がかかりました。

+1

+1

+1

+1

+1

+1

+1

@btford componentRouterこれは（もしあれば）どのように扱われますか？

シンプルで実用的なソリューションを提供し@balsaroriに感謝します。

コントローラをリロードせずに$routeパスパラメータを更新できるように、その上に詳しく説明されています。

uglifyjsを使用して本番ビルドのすべてのログを簡単に削除できるため、 $log console.log代わりに$logを使用します。

編集：プロジェクトで使用する場合の修正：

/**
 * parameter handling
 */

'use strict';

angular.module('route-params', [
  'ng',
  'ngRoute',
])
.service('routeParams', function(
  $route,
  $location
) {
  var R = {};

  /**
   * <strong i="15">@ngdoc</strong> method
   * <strong i="16">@name</strong> routeParams#replace
   *
   * <strong i="17">@description</strong>
   * Replace route params, including path params, without reloading controller.
   *
   * Causes `$route` service to update the current URL, replacing
   * current route parameters with those specified in `params`.
   *
   * Provided property names that match the route's path segment
   * definitions will be interpolated into the location's path, while
   * remaining properties will be treated as query params.
   *
   * If `options.reload` is truthy, the current controller is reloaded.
   *
   * If `options.history` is truthy, the browser history is updated.
   * If `options.history` is undefined, the browser history is only updated
   * when changing value of any existing `$route` parameter,
   * ie. not when adding a previously undefined `$route` parameter.
   *
   * <strong i="18">@param</strong> {!Object<string, string>} params mapping of URL parameter names to values
   * <strong i="19">@param</strong> {!Object<string, boolean>} options `history` and `reload` options.
   *
   * <strong i="20">@returns</strong> {Object} self
   */
  R.replace = function(params, options) {
    var key, value, updateRequired;
    options = options || {};

    // Convert params to strings, and check if they differ from current route params.
    // If `options.history` is undefined, and passed params update any current route params, then set it to true.
    var currentParams = $route.current.params;

    console.log('route: params: replace', {last: angular.copy(currentParams), next: params,
      route: $route.current, options: options});

    if (!$route.current.$$route) {
      // Can't change location.
      return;
    }
    var currentPath = $route.current.$$route.originalPath;
    var history = options.history;

    for (key in params) {
      // jshint eqnull: true
      value = params[key] = (params[key] == null ? undefined : params[key] + '');

      if (value !== currentParams[key]) {
        updateRequired = true;

        console.log('route: params: replace: ' + (currentPath.search(':\\b' + key + '\\b') ? 'path.' : 'search.') +
          key + ' = ' + (key in $route.current.params ? $route.current.params[key] + ' -> ' : '') + params[key]);

        if (history === undefined && key in currentParams) {
          console.log('route: params: replace: update history: ' + key + ' = ' + currentParams[key] + ' -> ' + value);
          history = true;
        }
      }
    }

    if (updateRequired) {
      // If `options.reload` is falsey, then set current route `reloadOnSearch` to false,
      // and make passed path params equal with current route path params,
      // so that `$route` treats the change as update only, and does not broadcast `$routeChangeStart` event.
      //
      // See https://github.com/angular/angular.js/issues/1699#issuecomment-45048054
      // and https://github.com/angular/angular.js/tree/v1.3.x/src/ngRoute/route.js#L484
      // and https://github.com/angular/angular.js/tree/v1.3.x/src/ngRoute/route.js#L539
      if (!options.reload) {
        // Set current route `reloadOnSearch` to false.
        $route.current.$$route.reloadOnSearch = false;

        // Add any passed path params to current route path params, and convert them to strings.
        // Path params are detected by searching for respective name group `:key[*?]` in current route path.
        for (key in params) {
          if (currentPath.search(':\\b' + key + '\\b') !== -1) {
            $route.current.pathParams[key] = params[key];
          }
        }

        // Add any current route path params to passed params, if not set there already.
        for (key in $route.current.pathParams) {
          if (!(key in params)) {
            params[key] = $route.current.pathParams[key];
          }
        }

        // TODO: push state if `options.history` is truthy.
      }
      // If `options.history` is falsey, and controller is reloaded,
      // then make `$location` replace current history state, instead of pushing a new one.
      else if (!history) {
        $location.replace();
      }

      $route.updateParams(params);

      // Update current route params, so the change is reflected immediatelly,
      // and nearby replace() call work correctly.
      for (key in params) {
        $route.current.params[key] = params[key];
      }
    }

    return R;
  };

  return R;
});

この問題の現在の状況はどうなっていますか？ 新しいルーターで解決されますか？ 1.4リリースに間に合いますか？ すぐに？

同じ問題が発生していますが、クエリ文字列パラメータに問題があります。 それらを変更するときにリロードしたくありません。 ただし、ユーザーがクエリ文字列を手動で変更したかどうかを知る必要があるため、 reloadOnSearch無効にすることはできません。 :)

ありがとう！

@marcalj fwiw、URLをアドレスバーと同期させておくサービスでこのソリューションをハッキングし、 reloadOnSearchを無効にしてクエリパラメータを取得できるようにしました。 また、ユーザーはブックマークまたはリンクを介してURLを直接ナビゲートできます。

ng-routerまたはui-routerを使用しますか？ コードなどへのリンクを教えていただけますか？

たぶんこれは新しいルーターを使って解決できるかもしれません、私のプロジェクトはまだ終わっていないので私はそれを待つことができます。

ありがとう！

@marcaljこの例は少し複雑で、おそらく時代遅れですが、 https：//github.com/irthos/mngr/blob/master/app.jsを見て10行目を確認してください。api.loadStateメソッドを使用して、適切な状態を構築するためのURL。

NgSilentは私にとっての解決策でした。
https://github.com/garakh/ngSilentを見て
ngRoute1.3.15でテスト済み

@ sergey-buturlakinと@kuchumovnの両方のソリューションを使用しましたが、同じ問題が発生し続けています。

問題のページ（pagex）でlocation.skipReloadを使用すると、うまく機能します。ルートを変更せずに、パスを何度も更新できます。 次に、実際の$ location.pathを使用してルートをpagexから新しいコントローラーに変更すると機能しますが、戻るボタンを押してpagexに戻り、別のページに移動しようとすると、それ以上できなくなります。ブラウザを更新せずにルートを変更します。 これを回避する方法はありますか？

+1

+1。 マティアスが提案したダブルコロンアプローチが好きです

+1

シングルページアプリがパス変更時にページをリロードしないのは一般的なユースケースです。
なぜそれがまだAngularに埋め込まれていないのか非常に奇妙です。
@EvanWinstanleyソリューションに基づいてプラグインを作成し
https://github.com/anglibs/angular-location-update

1.5でこれを再検討しましょう。 ＃5860に関連するPRがあります

ルートコントローラーをトリガーせずにクエリ文字列を更新するために同じ関数が必要です！ :)

次のようなもの： $location.searchSilent('sf', SearchFilter.getForRouteParams());

$ location.path（href）;
scope。$ apply（）;
解決策です！
$ apply（）を使用して変更を角度付けするように通知する必要があります

角度が通知されていなかったため、このスレッドは2年間開かれていません。すべてを呼び出さずに、ルートの一部を変更したいと考えています。

@petebacondarwinリロードなしでロケーションパスを更新するだけでなく、リロードなしでパスますhttps://github.com/angular/angular.js/issues/1699#issuecomment -96126887

@jicasadaのソリューションは私にとって完全にうまく

@jicasadaこれはui-routerで動作しますか？ 親と子の状態が同じURLを共有している場合、reloa dOnSearch：falseが機能しない

+1

+1

ngSilentが完璧に機能していることを確認しました。 それでも、公式の解決策をいただければ幸いです。

解決策は、基本的に$ location.path（）にパラメーターを追加することです。

app.run(['$route', '$rootScope', '$location', function ($route, $rootScope, $location) {
    var original = $location.path;
    $location.path = function (path, reload) {
        if (reload === false) {
            var lastRoute = $route.current;
            var un = $rootScope.$on('$locationChangeSuccess', function () {
                $route.current = lastRoute;
                un();
            });
        }
        return original.apply($location, [path]);
    };
}]);

そして、このように使用します

$location.path('/path/that/you/need', false);

$ location.replace（）window.location.replace関数と同じです。 CRUD操作のすべてのCreateで常にこの問題が発生するため、これはばかげています。

（および）+1

+1

次のような「検索パラメータ」を使用することをお勧めします。
/thing?id=1234
ルータープロバイダーでパラメーターを構成しないでください。ビューとコントローラーがリロードされません。
IDを取得したい場合
$location.search().id //1234
@cgross

デモhttp://codepen.io/dolymood/details/jrEQBx/
decoratorを使用してデコレータngViewDirective

+1

+1

+1

+1

+1

+1

+！

すでに十分な+1 :-)
メッセージが届きます。 クリスマスの前にこれを見ていきます！

＃15002で閉鎖。