angularJS1 ng-include指令相同html部分重用:
例如a.html中有一个共用的button,在b.html中也要用到,这时候,就用到了ng-include指令。
demo如下:
a.html
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<script type="text/javascript" src="js/angular.min-1.6.x.js"></script>
<style>
.container{width: 100%;height: auto;}
.div_other{
width: 100%;height: 300px;
background-color: aliceblue;
text-align: center;line-height: 300px;
}
.div_public{
width: 90%;height: 100px;
margin: 5%;background-color: aquamarine;
border-radius: 5px;
}
.btn{
width: 90%;height: 40px;
margin: 5%;background-color: cornflowerblue;
border-radius: 5px;
}
</style>
</head>
<body ng-app='myapp1' >
<div class="container">
<div class="div_other">一些其他的内容</div>
<!--
这一部分共用的部分放入一个单独的html文件中
<div class="div_public">
<p>假如:这是共用的html部分</p>
<input type="button" class="btn" value="下一步"/>
</div>
-->
<div ng-include="'btnpublic.html'"></div>
</div>
</body>
<script type="text/javascript" >
var app = angular.module('myapp1', []);
</script>
</html>
共用的html如下:
btnpublic.html
(这个不用在a.html中引入,直接在a.html中用
注意: 双引号中的单引号不能少。
<div class="div_public">
<p>假如:这是共用的html部分</p>
<input type="button" class="btn" value="下一步"/>
</div>