ページ上のリンクをたどると正常に動作するアプリがありますが、ブラウザーの戻るボタンと進むボタンを使用すると、次のように機能しなくなります。
- サーバーにリクエストを送信しますが、「戻る」のみです。
- テンプレートはまったくレンダリングされません。
さらに、ページ B からページ A に移動するために「戻る」を押すと、chrome の「更新/停止」ボタンが上部のオプションの間で急速にちらつき、前後に繰り返し試行するとちらつきが長くなります。
関連すると思われるコードスニペットは次のとおりです。
編集: 私は plnkr に取り組んでいますが、サイトは現在機能していません。アップしたら更新します。悪い動作を確認できます。
編集 2: これは plnkr ですが、問題があります。app.js ルーティングで指定された templateUrls が見つかりません。理由は不明です。とにかくここにコードがありますhttp://plnkr.co/edit/6cQtnvLi10sJKW8jVzVM
編集 3: 友人の助けを借りて、問題はレール 4 でターボリンクを使用することから来ていると思います。今はテストできませんが、うまくいけば回答を投稿します。
ファイル: app.js
window.App = angular.module('app', [
'templates',
'ui.bootstrap'
])
.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider
.when('/', {
controller: 'HomeCtrl',
templateUrl: 'home.html'
})
.when('/bars', {
controller: 'BarsPublicCtrl',
templateUrl: 'bars_public.html'
})
.when('/bars/:bar_name', {
controller: 'BarsDetailPublicCtrl',
templateUrl: 'bars_detail_public.html'
})
.otherwise({redirectTo: '/'});
}]);
ファイル：bars_public_ctrl.js
App.controller('BarsPublicCtrl', ['$scope', '$location', 'BarsPublicDataFactory',
function($scope, $location, BarsPublicDataFactory) {
// memoization
$scope.bars = $scope.bars || BarsPublicDataFactory.getBars();
}
]);
BarsPublicDataFactory は、次のスニペットのファクトリと同じように、偽のデータの静的配列を返すだけです
ファイル：bars_detail_public_ctrl.js
App.controller('BarsDetailPublicCtrl', ['$scope', '$routeParams', 'BarsDetailPublicDataFactory',
function($scope, $routeParams, BarsDetailPublicDataFactory) {
$scope.bar = {};
$scope.bar.name = $routeParams.barId;
$scope.barDetails = BarsDetailPublicDataFactory.getBaz($routeParams.bar_name);
$scope.Bazs = BarsDetailPublicDataFactory.getBazs();
}]);
ファイル：bars_public.html
<div class="container">
<div ng-repeat="bar in bars">
<div class="row">
<div class="col-sm-12">
<a href="/bars/{{bar.name}}">
<h4 style="display:inline;">{{ bar.name }}</h4>
</a>
</div>
</div>
<hr />
</div>
</div>
ファイル：bars_detail_public.html
<select ng-model="searchSelect.style" style="width:100%;">
<option value='' selected>All</option>
<option ng-repeat="baz in bazs">{{baz}}</option>
</select>
<div>
<accordion close-others="true">
<accordion-group ng-repeat="foo in foos | filter:searchSelect">
<accordion-heading>
<div>
<h3>{{foo.name}}</h3>
<em>{{foo.style}}</em>
</div>
</accordion-heading>
</accordion-group>
</accordion>
</div>
他に何か必要な場合はお知らせください。