Angularで画面遷移やロードをさせずにURLのみを変更する方法
ハマったのでメモ。
まさかpushStateでURL書き換えてもRoutingの通りにロードしてしまうとは。。
サンプルコード
$locationChangeSuccessはURLが変更された時に発火されるイベント。
URL変更前の情報をURL変更後に代入するとリロードが行われないみたいです。(理由は不明。。)
↓みたいにメソッド1つ用意しておくとリロードするURL変更としないURL変更が切り替えられて便利かも。
参考のリンクにあるような$location.path
を書き換える方法ちょっとやりすぎかなぁと。。
angular.module('SampleApp', []).run(['$route', '$rootScope', '$location', function ($route, $rootScope, $location) { var updatePath = function(path, reload) { if(reload === false){ var lastRoute = $route.current; var deregistrationFn = $rootScope.$on('$locationChangeSuccess', function () { $route.current = lastRoute; deregistrationFn(); }); } $location.path(path) }; }]);
参考
- Option on $location to allow hash/path change w/o reloading the route · Issue #1699 · angular/angular.js
- AngularJS Change Path Without Reloading - Joel Saupe
- 作者: 山田祥寛
- 出版社/メーカー: 技術評論社
- 発売日: 2015/08/19
- メディア: 大型本
- この商品を含むブログ (1件) を見る