angularjs 锚点操作服务 $anchorScroll

在普通的html网页中,我们可以通过在url后边添加  #elementid 的方式,将页面显示定位到某个元素,也就是锚点。

但是在angularjs应用的网页中,页面路由的写法是 #route/route   锚点的写法会被当做一个页面路由解析过去,达不到定位的目的。

angular提供一个$anchorScroll  用来做锚点的功能。

用法如下:

$scope.goto = function (id) {
                    $location.hash(id);
                    $anchorScroll();
                }

  

进入页面时或者触发某操作时调用 goto(‘id‘) 即可

时间: 2024-10-19 18:33:07

angularjs 锚点操作服务 $anchorScroll的相关文章

AngularJS学习--- 动画操作 (Applying Animations) ngAnimate step 12

1.切换目录 git checkout step-12 npm start 2.效果图 这里在点击右边的缩略图时,会有一个很明显的从下向上的动画过程. 3.代码实现: step11和step12之间的代码差异:https://github.com/angular/angular-phonecat/compare/step-11...step-12 Dependencies(依赖的js库): bower.json { "name": "angular-seed", &

Angularjs 常用服务 $http $location $anchorScroll $cacheFactory $timeout $interval $sce

Angularjs 常用服务 $http $location$anchorScroll $cacheFactory $timeout $interval $sce学习要点:1. Angularjs 中的 $http 服务2. Angularjs 中的 $location $anchorScroll 服务3. Angularjs 中的 $cacheFactory 服务4. Angularjs 中的 $timeout $interval 服务5. $sce 服务 浏览器简析 html 标签1. An

自定义AngularJS中的services服务

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta http-equiv="X-UA-Compatible"content="IE=edge" /> <meta name="viewport"

AngularJS中实现日志服务

本篇体验使用AngularJS自定义一个记录日志的服务. 在AngularJS中,服务的一些写法是这样的: var app = angular.module('app',[]); app.provider('providerName', function(){...}); app.service('serviceName', function(){}); app.factory('factoryName', function(){}); 等同于: app.config(['$provide',

AngularJS的模块化操作。

在Javascript中,模块化的开发模式有很多优点,我就在网上找了几点,不管你懂不懂,反正我是不懂模块化开发的. 现在业界比较规范的是AMD,研究模块化开发可以使用比较流行的require.js库来实现模块化的开发,推荐阅读Snandy 的相关系列文章(相当给力):http://www.cnblogs.com/snandy/category/360589.html 使用模块能给我们带来许多好处,比如: 1 : 保持全局命名空间的清洁: 2 : 编写测试代码更容易,并能保持其清洁,以便更容易找到

angularJS之DOM操作

addClass()-为每个匹配的元素添加指定的样式类名after()-在匹配元素集合中的每个元素后面插入参数所指定的内容,作为其兄弟节点append()-在每个匹配元素里面的末尾处插入参数内容attr() - 获取匹配的元素集合中的第一个元素的属性的值bind() - 为一个元素绑定一个事件处理程序children() - 获得匹配元素集合中每个元素的子元素,选择器选择性筛选clone()-创建一个匹配的元素集合的深度拷贝副本contents()-获得匹配元素集合中每个元素的子元素,包括文字和

AngularJs练习Demo14自定义服务

@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Provider</title> <script type="text/javascript" src="~/Scripts/angular

AngularJs练习Demo15自定义服务

1 @{ 2 Layout = null; 3 } 4 5 <!DOCTYPE html> 6 7 <html> 8 <head> 9 <meta name="viewport" content="width=device-width" /> 10 <title>Provider</title> 11 <script type="text/javascript" src

angularJS使用内置服务

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body ng-app="myApp" ng-contr