angularjs $location 服务

简介:
<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script src="angular.min.js"></script>
<script>
//对网址信息进行2次的封装。

var m1 = angular.module('myApp',[]);
m1.controller('Aaa',['$scope','$location',function($scope,$location){
    var a = $location.absUrl();//网址的绝对地址(加的参数进行了编码)
    $location.path('aaa/bbb/ccc').replace();
    $location.hash('hello');
    $location.search({'age':'20'});
    var a = $location.protocol();//地址的协议
    console.log(a);
}]);

</script>
</head>
<body>
<div ng-controller="Aaa">
</div>
</body>
</html>
复制代码
复制代码
<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#parent div{ width:300px; height:500px; border:1px #000 solid; margin:20px;}
#parent ul{ width:200px; position:fixed; top:0; right:0;}
</style>
<script src="angular.min.js"></script>
<script>


var m1 = angular.module('myApp',[]);
m1.controller('Aaa',['$scope','$location','$anchorScroll',function($scope,$location,$anchorScroll){
    $scope.change = function(id){
        //console.log(id);
        $location.hash(id);
        $anchorScroll();//锚点跳转
    };
}]);

</script>
</head>

<body>
<div id="parent" ng-controller="Aaa">
    <ul>
        <li ng-repeat="id in [1,2,3,4,5]" ng-click="change('div'+id)">{{id}}aaaaaaaaaa</li>
    </ul>
    <div ng-repeat="id in [1,2,3,4,5]" ng-attr-id="div{{id}}">{{id}}</div>
</div>
</body>
</html>
复制代码

 


本文转自农夫山泉别墅博客园博客,原文链接:http://www.cnblogs.com/yaowen/p/5742154.html,如需转载请自行联系原作者

相关文章
|
Java 决策智能
ACM刷题之路(十)博弈论 jack & rose
ACM刷题之路(十)博弈论 jack & rose
208 0
|
数据库
Mogo数据库的简单操作
Mogo数据库的简单操作
444 0
|
Oracle 关系型数据库 数据库
oracle 恢复表语句
oracle 恢复表语句
|
算法 C++
【C/C++学院】0825-类模板/final_override/类模板与普通类的派生类模板虚函数抽象模板类/类模板友元/位运算算法以及类声明/Rtti 实时类型检测/高级new创建/类以及函数包装器
<p></p> <h2> <span style="font-family:宋体; font-size:16pt">类模板</span><span style="font-family:宋体; font-size:16pt"></span> </h2> <p></p> <p>类模板多个类型默认类型简单数组模板</p> <pre name="code" class="java">#p
1394 0
|
4天前
|
数据采集 人工智能 安全
|
13天前
|
云安全 监控 安全
|
5天前
|
自然语言处理 API
万相 Wan2.6 全新升级发布!人人都能当导演的时代来了
通义万相2.6全新升级,支持文生图、图生视频、文生视频,打造电影级创作体验。智能分镜、角色扮演、音画同步,让创意一键成片,大众也能轻松制作高质量短视频。
1100 152
|
18天前
|
机器学习/深度学习 人工智能 自然语言处理
Z-Image:冲击体验上限的下一代图像生成模型
通义实验室推出全新文生图模型Z-Image,以6B参数实现“快、稳、轻、准”突破。Turbo版本仅需8步亚秒级生成,支持16GB显存设备,中英双语理解与文字渲染尤为出色,真实感和美学表现媲美国际顶尖模型,被誉为“最值得关注的开源生图模型之一”。
1774 9