a标签跳转到配置有angular路由的页面，并控制显示view中的内容

最新推荐文章于 2022-12-23 23:07:17 发布

littlebearGreat

最新推荐文章于 2022-12-23 23:07:17 发布

阅读量3.9k

点赞数

分类专栏：前端笔记

本文链接：https://blog.csdn.net/littlebearGreat/article/details/78093914

版权

前端笔记专栏收录该内容

126 篇文章 2 订阅

订阅专栏

今天，工作上遇到一个问题，问题描述：

一个页面（取名：页面1），这个页面有三个tab切换，这三个tab切换的内容要用angularjs的路由来配置，点击tab后可以切换内容。在其它地方，有三个连接，都可以连接到这个页面（页面1），只是连接到页面1后显示的tab内容不同，这个该怎么写？

如图

我的解决思路：

angular的路由机制是根据链接的hash值来实现路由切换的，那么在点击三个连接的时候可以设置hash值，在js中获取到hash值，赋在路由的otherwise上即可

代码如下：

1.这是三个连接所在的页面

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<ul>
		<li>
			<a href="hash.html#a">点击跳转到页面，内容为a</a>
		</li>
		<li>
			<a href="hash.html#b">点击跳转到页面，内容为b</a>
		</li>
		<li>
			<a href="hash.html#c">点击跳转到页面，内容为c</a>
		</li>
	</ul>
</body>
</html>

2.这是页面1

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>hash</title>
	<script src="js/angular.min.js"></script>
	<script src="js/angular-route.js"></script>
	<script src="js/hash.js"></script>
</head>
<body ng-app="myapp" ng-controller="hash">
	<ul>
		<li><a href="#a">aaa</a></li>
		<li><a href="#b">bbb</a></li>
		<li><a href="#c">ccc</a></li>
	</ul>
	<div ng-view></div>
</body>
</html>

3.这是页面1的js

// var hash = location.hash;
var app = angular.module('myapp',['ngRoute'])
	.config(['$routeProvider',function($routeProvider) {
		$routeProvider
		.when('/a',{templateUrl:'html/aaa.html'})
		.when('/b',{templateUrl:'html/bbb.html'})
		.when('/c',{templateUrl:'html/ccc.html'})
		.otherwise({redirectTo:location.hash});
	}])
app.controller('hash',['$scope',function($scope){

}])

littlebearGreat

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
a标签跳转到配置有angular路由的页面，并控制显示view中的内容

今天，工作上遇到一个问题，问题描述：一个页面（取名：页面1），这个页面有三个tab切换，这三个tab切换的内容要用angularjs的路由来配置，点击tab后可以切换内容。在其它地方，有三个连接，都可以连接到这个页面（页面1），只是连接到页面1后显示的tab内容不同，这个该怎么写？如图我的解决思路：angular的路由机制是根据链接的hash值来实现路由切换的，那么
复制链接

扫一扫