Home > Developer > Web Develop
1, index.html:
<! DOCTYPE html>
<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>
<body>
<!--The following is a custom instruction demo with nested customizations. -
<div class= "wrapper" >
<form class= "form-horizontal" role= "form" >
<control> User name:</control>
<br>
<controlpwd> Password:</controlpwd>
<br>
<controlbtn> Login </controlbtn>
<controlbtn> Cancel </controlbtn>
</form>
</div>
<script src= "./directive-form.js" ></script>
</body>
2, Directive-form.js:
var mymodule = angular.module ("App", []);
Mymodule.directive (' Control ', function () {//Customize reusable B3 style text input box
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= "Please enter the user name ... "></div></div>"
}
}). directive (' controlpwd ', function () {//Custom reusable B3 style password input box
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= " Please enter the password ... "></div></div>"
}
}). directive (' controlbtn ', function () {//Custom reusable B3 Style button
return {
Restrict: ' AE ',
Replace:true,
Transclude:true,
Template: ' <button class= ' btn btn-default btn_diff ' ><span ng-transclude></span></button> '
}
});
[email protected] more complex instructions nested demo--integrated Small example: Login interface
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
