Javascript 使用angularJs重定向-但仅在div/main元素内部
我有一个带有页眉、主页面和页脚的html页面(我使用materialize和angularJS)。我总是希望页眉和页脚保持不变,但当我按下sidenav中的链接时,我希望主元素是另一个html页面。假设我按下sidenav中的info链接,我希望页眉和页脚保持不变,但是我从html的主要部分移动到另一个页面。这就是我到目前为止所做的:Javascript 使用angularJs重定向-但仅在div/main元素内部,javascript,html,css,angularjs,Javascript,Html,Css,Angularjs,我有一个带有页眉、主页面和页脚的html页面(我使用materialize和angularJS)。我总是希望页眉和页脚保持不变,但当我按下sidenav中的链接时,我希望主元素是另一个html页面。假设我按下sidenav中的info链接,我希望页眉和页脚保持不变,但是我从html的主要部分移动到另一个页面。这就是我到目前为止所做的: <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0"/>
<title>MyPage</title>
<!-- CSS -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection"/>
<link href="css/style.css" type="text/css" rel="stylesheet" media="screen,projection"/>
</head>
<body ng-app="myPage" ng-controller="mainCtrl">
<header>
<ul id="sidenav" class="side-nav fixed light-blue lighten-1">
<li><a id="page" class="white-text text-accent-1" href="#">Home</a> </li>
<br/><br/>
<li><a id="page1" class="white-text text-accent-1" href="#"><b>Info</b></a></li>
<li><a id="page2" class="white-text text-accent-1" href="#"><b>Another page</b></a></li>
<li><a id="page3" class="white-text text-accent-1" href="#"><b>Even one more page</b></a></li>
</ul>
</header>
<main>
<div id="main">
<p> Some text for main page here </p>
</div>
</main>
<footer class="page-footer orange">
<div class="container">
<div class="row">
<div class="col l6 s12">
<h5 class="white-text">About</h5>
<p class="grey-text text-lighten-4">
About my company.
</p>
</div>
</div>
</div>
</footer>
<!-- Scripts-->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="js/materialize.js"></script>
<script src="controllers/mainCtrl.js"></script>
</body>
</html>
我的网页
这里是主页的一些文本
关于
关于我的公司。
这可能真的很容易,但我还没有发现如何能够来回切换,并保持页眉和页脚。我试图将新的html页面链接到,但是我必须复制页眉和页脚,这并不理想。例如,如果我想更改sidenav,我不希望有10-15个html页面需要编辑 您必须设置路由器,并在某些html元素上放置
ng view
指令:
...
</header>
<div ng-view>
<main>
...
</main>
</div>
<footer class="page-footer orange">
...
如果您不想使用侧边栏链接
<a id="page" class="white-text text-accent-1" href="#/home">Home</a>
routeProvider将使用ng view
指令在定义的元素之间加载您的home.html
和homeCtrl
<a id="page" class="white-text text-accent-1" href="#/home">Home</a>