Angular注入了长内容的页面会让整个页面在页面顶部下方加载,切断了页面标题
Angular injected pages with long content make entire page load below the top of the page, cutting off the page title
看看下面的柱塞是如何的,当你点击link one
或link three
时,页面不会在页面顶部加载,所以你看不到page title
,你必须向上滚动才能看到页面标题。为什么会这样?我怎样才能使它像普通网页一样在顶部加载页面?
这是活塞。
这是我的js:
var routerApp = angular.module('routerApp', ['ui.router','ui.bootstrap']);
routerApp.config(function($stateProvider, $urlRouterProvider, $locationProvider) {
$urlRouterProvider.otherwise('/home');
$locationProvider.html5Mode(false).hashPrefix("");
$stateProvider
// HOME VIEW ========================================
.state('home', {
url: '/home',
templateUrl: 'partial-home.html'
// onEnter: scrollContent
})
// ONE VIEW ========================================
.state('one', {
url: '/one',
templateUrl: 'partial-one.html'
})
// TWO VIEW ========================================
.state('two', {
url: '/two',
templateUrl: 'partial-two.html'
})
// THREE VIEW ========================================
.state('three', {
url: '/three',
templateUrl: 'partial-three.html'
})
});
这是我的html(见上面的plunker链接注入的页面)。
<!DOCTYPE html>
<html>
<head>
<!-- CSS -->
<script data-require="jquery@*" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />
<!-- JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="http://code.angularjs.org/1.2.13/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.0/ui-bootstrap-tpls.js"></script>
<script src="script.js"></script>
<!-- // base path for angular routing -->
<!--<base href="/" />-->
</head>
<body ng-app="routerApp">
<!-- NAVIGATION -->
<!-- Fixed navbar -->
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" ui-sref="home">Some web page somewhere</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a ui-sref="one">Link One</a></li>
<li><a ui-sref="two">Link Two</a></li>
<li><a ui-sref="three">Link Three</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<!-- End Fixed navbar -->
<!-- MAIN CONTENT -->
<!-- Inject Content Here -->
<div class="container" style="padding-top:68px;">
<div ui-view></div>
</div>
</body>
</html>
将autoscroll="false"
添加到ui-view
中以防止此行为。
<div class="container" style="padding-top:68px;">
<div ui-view autoscroll="false"></div>
</div>
恰好演示
参见ui-view
和autoscroll
指令的文档:
自动滚动(可选)
字符串它允许您设置当视图被填充时浏览器窗口的滚动行为。默认情况下,$anchorScroll会被ui-router的自定义滚动服务ui.router.state.$uiViewScroll覆盖。这个自定义服务允许您在状态激活期间填充ui-view元素时将其滚动到视图中。
相关文章:
- 动态加载和卸载js文件
- UIWebview赢得't通过基本身份验证加载动态加载的资源(通过jQuery mobile)
- 页面加载后加载简单的JS代码
- 如何更改jquerymobile中默认的加载ajax加载程序gif
- 在AngularJS中手动加载和卸载外部javascript
- AJAX:如何在初始加载时加载内部网页
- 在地图加载/页面加载时,我想将地图设置为当前地理位置,但不想在地图上显示定位图标
- 页面加载时加载放大弹出窗口
- 正在等待加载文件(加载JavaScript)
- davis.js在页面加载/重新加载上生成两个请求
- 在AngularJS应用程序中加载JSON(加载谷歌电子表格)
- 延迟加载 脚本加载和/或执行
- 加载时加载额外的html
- 为什么require.js似乎在初始页面加载时加载了我的所有模块
- 在Ajax(过滤器)加载之后加载jQuery脚本
- 如何加载页面加载放大弹出模式
- 使用Twitter引导程序's Scrollspy到延迟加载(滚动加载)异步JavaScript
- 如何为未加载、加载时间过长和被阻止的css文件编写回退
- 如何在页面加载时加载隐藏分区的JS内容
- 页面中的条件在卸载之前加载事件