欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

AngularJS模块学习之Anchor Scroll_AngularJS

程序员文章站 2022-04-10 09:21:35
...
俗话说的好:好记性不如一个烂笔头,本文对angularjs模块学习笔记,首先我们从anchor scroll开始学习,具体内容请看下文:

•$anchorScroll()用于跳转至定义ID;
•$location对象的hash()方法会替换当前url作为hash键;
•$anchorScroll()读取并跳转至ID处。

下面简单的例子,这里是输出结果:

AngularJS模块学习之Anchor Scroll_AngularJS

源码 index.html--11行,标示了的跳转ID:




{{key}}
      {{item}}

    app.js

    var demoApp = angular.module("app",[])
    .controller("MockController",
    function ($scope, $location, $anchorScroll) {
    $scope.numbers = {
    "自然数":["","","","","","","","","","","","","","","","","","","",""],
    "质数":["","","","","","", "", "", "", ""]
    };
    $scope.jumper = function(key){
    $location.hash(key);
    $anchorScroll();
    }
    });

    以上所述是小编给大家整理的AngularJS模块学习之Anchor Scroll 的相关内容,希望大家喜欢。