1、index.html:
<!DOCTYPE HTML>
<html ng-app="app">
<head>
<title>custom-directive</title>
<meta charset="utf-8">
<link rel="stylesheet" href="../css/bootstrap.css">
<script src="../js/angular.js"></script>
<style>
.wrapper{
border-radius:6px;
width:500px;
height:auto;
background:#f2f2f2;
padding:50px 40px 30px 40px;
margin:0 auto;
margin-top:120px;
box-shadow:0 0 6px #333;
}
.btn_diff{
width:100px;
margin-right:15px;
position:relative;
left:160px;
}
</style>
</head>
<body>
<!-- 下面是带嵌套的自定义指令demo. -->
<div class="wrapper">
<form class="form-horizontal" role="form">
<control>用户名：</control>
<br>
<controlpwd>密码：</controlpwd>
<br>
<controlbtn>登录</controlbtn>
<controlbtn>取消</controlbtn>
</form>
</div>
<script src="./directive-form.js"></script>
</body>
</html>
2、directive-form.js：
var myModule = angular.module("app",[]);
myModule.directive('control',function(){//自定义可复用B3风格文本输入框
return {
restrict:'AE',
replace:true,
transclude:true,
scope:{},
link:function(scope,element,attrs){
},
template:'<div class="form-group"><label class="col-md-2 control-label"><span ng-transclude></span></label><div class="col-md-10"><input class="form-control" type="text" placeholder="请输入用户名..."></div></div>'
}
}).directive('controlpwd',function(){//自定义可复用B3风格密码输入框
return {
restrict:'AE',
replace:true,
transclude:true,
scope:{},
link:function(scope,element,attrs){
},
template:'<div class="form-group"><label class="col-md-2 control-label"><span ng-transclude></span></label><div class="col-md-10"><input class="form-control" type="password" placeholder="请输入密码..."></div></div>'
}
}).directive('controlbtn',function(){//自定义可复用B3风格按钮
return {
restrict:'AE',
replace:true,
transclude:true,
template:'<button class="btn btn-default btn_diff"><span ng-transclude></span></button>'
}
});
