我正在尝试使用 AngularJS 创建一个应用程序。目前,我的应用程序中有一个 View 。我的应用程序将有多个 View 。此时,我的 index.html 文件如下所示:
index.html
...
Choose:
<a href="/view-1">View 1</a> |
<a href="/view-2">View 2</a>
<div class="view-animate-container">
<div id="driver" ng-view class="view-animate" style="margin: 0; padding: 0; height: 100%;"></div>
</div>
<hr />
</div>
</body>
view1.html
<div>
<div style="position:fixed;">
<h1>View 3</h1>
<div>
<a href="#sectionA">Section A</a> | <a href="#sectionB">Section B</a> | <a href="#sectionC">Section C</a>
</div>
</div><br /><br /><br /><br />
<div style="overflow-y:scroll">
<h2 id="sectionA">Section A</h2>
<div style="background-color:navy; color:white;">
Some text content goes here.
<br /><br /><br /><br /><br />
<br /><br /><br /><br /><br />
Yup.
</div>
<h2 id="sectionB">Section B</h2>
<div style="background-color:red; color:white;">
Some text content goes here.
<br /><br /><br /><br /><br />
<br /><br /><br /><br /><br />
Yup.
</div>
<h2 id="sectionC">Section C</h2>
<div style="background-color:peachpuff; color:black;">
Some text content goes here.
<br /><br /><br /><br /><br />
<br /><br /><br /><br /><br />
Yup.
</div>
</div>
</div>
main.js
angular.module('myApp', ['ngRoute', 'ngAnimate'])
.config(function ($routeProvider, $locationProvider) {
$routeProvider.when('/view-1', {
templateUrl: '/views/view1.html',
controller: View1Ctrl
});
$routeProvider.when('/view-2', {
templateUrl: '/views/view2.html',
controller: View2Ctrl
});
// configure html5 to get links working on jsfiddle
$locationProvider.html5Mode(true);
})
;
function View1Ctrl($scope, $routeParams) {
this.name = "View1Cntl";
this.params = $routeParams;
}
function View2Ctrl($scope, $routeParams) {
this.name = "View2Cntl";
this.params = $routeParams;
}
我正在尝试让我的书签( anchor 标记)在 view1 中工作。每当我单击“A 部分”、“B 部分”或“C 部分”时,路线都会更新。然后 View 重新动画到屏幕中。最后,将 View 定位到相应的部分。所以问题是 View 重新加载。实际上,我只想在有人点击时跳转到页面中的书签。我如何在 AngularJS 中做到这一点?
谢谢!
最佳答案
我能够使用 scrollTo
函数并用调用它的 href
标记替换 ng-click
来完成类似的行为。
main.js
$scope.scrollTo = function(selector) {
window.scrollTo(0, $(selector)[0].offsetTop - 100);
}
view1.html
<div>
<a ng-click="scrollTo('#sectionA')">Section A</a> |
<a ng-click="scrollTo('#sectionB')">Section B</a> |
<a ng-click="scrollTo('#sectionC')">Section C</a>
</div>
<h2 id="sectionA">Section A</h2>
<div style="background-color:navy; color:white;">
Some text content goes here.
</div>
<h2 id="sectionB">Section B</h2>
<div style="background-color:navy; color:white;">
Some text content goes here.
</div>
<h2 id="sectionC">Section C</h2>
<div style="background-color:navy; color:white;">
Some text content goes here.
</div>
关于javascript - AngularJS - 使用书签,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/20840986/