Angularjs浏览器后退按钮停止加载部分内容并导致页面刷新

我有一个应用程序，当我跟随页面上的链接时，它会正常运行，但如果我使用浏览器的后退和前进按钮，它会以以下方式中断：

它向服务器发送请求，但仅在“返回”时发送

模板根本不呈现

此外，当我点击“后退”从B页转到A页时，chrome的“刷新/停止”按钮在顶部选项之间快速闪烁，反复尝试返回和前进会导致更长时间的闪烁

以下是我认为相关的代码片段：

编辑：我正在做一个plnkr，但该网站目前不工作。我会在它启动时更新，我可以验证不良行为

编辑2：这是plnkr，但它有问题。它找不到app.js路由中指定的TemplateURL，不确定原因。这是代码

编辑3：在一位朋友的帮助下，我认为问题来自于在Rails4上使用turbo链接。我现在不能测试它，但如果可以的话，我会发布一个答案

文件：app.js 文件：bar\u public\u ctrl.js BarsPublicDataFactory只返回假数据的静态数组，与下面代码段中的工厂相同

文件：bar\u detail\u public\u ctrl.js 文件：bars_public.html

文件：bar\u detail\u public.html

全部的
{{baz}}
{{foo.name}
{{foo.style}

---

如果您还需要什么，请告诉我。

原来问题是由带有Rails 4的TurboLink引起的。我没有提到它，因为我没有意识到它的重要性

我不知道到底是什么原因造成的，但是turbolinks注入了一些javascript，而且我能说的最好的是，当你使用浏览按钮破坏我的应用程序时，它会高举一些事件，导致页面重新加载

所以我听从了这个建议： 而且效果很好！希望其他人能从中受益。

在此之前： [已安装]jquery\u turbo\u链接 [已安装]涡轮链接

更改： [已安装]jquery\u turbo\u链接 [已删除]涡轮链接

---

成功了

非常感谢你！这是Angular应用程序中最奇怪的错误，我们花了大量时间调试它……你的答案终于被拯救了。

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: '/'});
}]);

 App.controller('BarsPublicCtrl', ['$scope', '$location', 'BarsPublicDataFactory',
        function($scope, $location, BarsPublicDataFactory) {
                // memoization
                $scope.bars = $scope.bars || BarsPublicDataFactory.getBars();
      }
    ]);

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();
}]);

<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>

<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>