ui-router中的锚点问题(angular中的锚点问题)

angular.module(‘anchorScrollExample‘, [])
.controller(‘ScrollController‘, [‘$scope‘, ‘$location‘, ‘$anchorScroll‘,
  function($scope, $location, $anchorScroll) {
    $scope.gotoBottom = function() {
      // set the location.hash to the id of
      // the element you wish to scroll to.
      $location.hash(‘bottom‘);

      // call $anchorScroll()
      $anchorScroll();
    };
  }]);

官网文档传送门:https://docs.angularjs.org/api/ng/service/$anchorScroll
综上,angular对锚点做了处理,使用时先用$location.hash(),指定位置,hash的参数就是锚点id,然后再使用$anchorScroll()移动到锚点;
时间: 2025-01-09 08:11:41

ui-router中的锚点问题(angular中的锚点问题)的相关文章

在angular中结合使用jquery的生成二维码插件

最近在开发项目中,需要在ionic框架中使用到jquery的生成二维码功能的插件,起初我直接在templates中写js代码: 发现这段代码根本就不会执行,原因是js代码必须要在该模块的作用域范围内才能生效,于是把这段代码该模块对应的controller中即可: 在学习angular中永远不要忘记作用域这件事.哈哈,看来学习编程的过程中有时需要抛开传统的思维方式才行啊.虽然只是一个小小的问题,但对于初学angular的我还是纠结了好一阵.

Angular中的装饰器

Angualr中的装饰器是一个函数,它将元数据添加到类.类成员(属性.方法)和函数参数 用法:要想用装饰器,把它放到被装饰对象的上面或做左面 1.类装饰器: 类装饰器应用于类构造函数,可以用来监控.修改或替换类定义 类装饰器表达式会在运行时当作函数被调用,类的构造函数作为唯一的参数 @Component 标记类作为组件并收集组件配置元数据(继承Directive) @Directive 标记类作为指令并收集组件配置元数据 声明当前类时一个指令,并提供关于该指令的元数据 @Pipc 声明当前类是一

Angularjs中UI Router全攻略

摘自:Angularjs中UI Router全攻略 温馨提示:想要了解 angular-ui-router的同学,从上往下读一遍,能带随着coding那就更好了,保证你对angular-ui-router基本全部掌握. 如何引用依赖angular-ui-router angular.module('app',["ui.router"]) .config(function($stateProvider){ $stateProvider.state(stateName, stateCofi

Angularjs中UI Router用法小记录

今天自己参考已有的项目代码学习了下UI Router的用法,写了个小demo,验证了下自己的想法,现把使用情况记录一下. 1.入口文件index.html,引入项目所需的js文件,标注ng-app,创建ui-view元素,为后面的嵌套做容器准备. <!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> <meta charset="UTF-8">

angular : $location &amp; $state(UI router)的关系

次序:angular 的 location会先跑 $rootScope.$on("$locationChangeStart", function (scope, newUrl, oldUrl) { log("$locationChangeStart from " + oldUrl) log("$locationChangeStart to " + newUrl) }); 接着是 ui router $state $rootScope.$on(&q

angular 的ui.router 定义不同的state 对应相同的url

Angular UI Router: Different states with same URL? The landing page of my app has two states: home-public, home-logged-in. Now I want to show both states on the same URL, but let the controller and template depend on the user session (is the user log

ngRoute 和 ui.router 的使用方法和区别

在单页面应用中要把各个分散的视图给组织起来是通过路由机制来实现的.本文主要对 AngularJS 原生的 ngRoute 路由模块和第三方路由模块 ui.router 的用法进行简单介绍,并做一个对比. ngRoute 使用方法 1) 引入 angular-route lib 无论是 ngRoute 还是 ui.router ,作为框架额外的附加功能,都必须以 模块依赖 的形式被引入. 1 <script src="lib/angular-route.js"></sc

angular中的子路由用法

Angular ui-route的用法 引入angular和使用angular子路由时需要的依赖模块angular-ui-route.js.并且在html中将路由要插入的位置写上.而在js部分中和angular路由一样在控制台外面写 <body> <div ui-view></div> </body> <script src="js/angular.min.js" type="text/javascript" c

[转]AngularJS 使用 UI Router 实现表单向导

本文转自:http://www.oschina.net/translate/angularjs-multi-step-form-using-ui-router 今天我们将使用AngularJs和伟大的UI Router以及Angular ngAnimate module创建一个带动画的多步表单.这项技术可以用在你想要简化用户操作的大表单上. 我们看到这项技术已经应用在了许多的网页上.比如购物车,注册表单,入职流程以及许多多步表单,让用户更容易在线填写表单. 下面我们将构建它: 使用UI Rout

angular中ng-route和ng-ui-router的差异($http)

ngroute和ui-router并不是两个相互独立的部分,ui-router是社区库提供的用来提高ngroute的功能的,可用于多视图(嵌套),功能十分强大! 为了全面的了解两者的不同点,在这里我就加上$http请求时对两者进行比较, 1.引入文件:  ngroute:<script src="angular-route.js"></script>  ui-router:<script src="angular-ui-router.js&quo