--@angularJS--较复杂的指令嵌套demo——综合小实例：登陆界面

浏览数：73 / 时间：2015年06月09日

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>

<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>‘
   }
});