gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-04 02:42:53 25 4
gpt4 key购买 nike

我有一个应用程序,当我点击页面上的链接时,它的行为正常,但如果我使用浏览器的后退和前进按钮,它会以下列方式中断:

  1. 它向服务器发送请求,但仅限于“返回”。
  2. 模板根本没有呈现。

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

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

编辑:我正在开发 plnkr,但该网站目前无法正常工作。我会在更新时更新,我可以验证不良行为

编辑 2:这是 plnkr,但它有问题。它找不到 app.js 路由中指定的 templateUrls,不知道为什么。无论如何,这是代码http://plnkr.co/edit/6cQtnvLi10sJKW8jVzVM

编辑 3:在 friend 的帮助下,我认为问题出在 rails 4 上使用 turbo-links。我现在无法测试它,但如果可以的话,我会发布答案.

文件: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>

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

最佳答案

原来问题是由 Rails 4 的 turbolinks 引起的。我没有提到它,因为我没有意识到它很重要。

我不知道到底是什么导致了它,但是 turbolinks 注入(inject)了一些 javascript,据我所知,它劫持了一些事件,当您使用破坏我的应用程序的浏览按钮时,这些事件会导致页面重新加载。

所以我听从了这个建议:http://blog.steveklabnik.com/posts/2013-06-25-removing-turbolinks-from-rails-4它工作得很好!希望其他人可以受益。

关于Angularjs 浏览器后退按钮停止加载部分内容并导致页面刷新,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19496453/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com