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

--@angularJS--较复杂的指令嵌套demo——综合小实例：登陆界面的更多相关文章

  1. AngularJS指令嵌套时link函数执行顺序的问题

    今天研究指令嵌套时,发现子指令的link函数先于父指令的link函数执行. 这样和预想的顺序不一样. 也就是说,如果子指令的某个scope变量依赖于父指令传来的参数时,可能一直是undefinded比 ...

  2. 带你走近AngularJS - 创建自己定义指令

    带你走近AngularJS系列: 带你走近AngularJS - 基本功能介绍 带你走近AngularJS - 体验指令实例 带你走近AngularJS - 创建自己定义指令 ------------ ...

  3. 带你走近AngularJS 之创建自定义指令

    带你走近AngularJS 之创建自定义指令 为什么使用AngularJS 指令? 使用过 AngularJS 的朋友应该最感兴趣的是它的指令.现今市场上的前端框架也只有AngularJS 拥有自定义 ...

  4. AngularJS常用插件与指令收集

    angularjs 组件列表 bindonce UI-Router Angular Tree angular-ngSanitize模块-$sanitize服务详解 使用 AngularJS 开发一个大 ...

  5. angularjs 创建自定义的指令

    创建自定义的指令 除了 AngularJS 内置的指令外,我们还可以创建自定义指令. 你可以使用 .directive 函数来添加自定义的指令. 要调用自定义指令,HTMl 元素上需要添加自定义指令名 ...

  6. AngularJS:directive自定义的指令

    除了 AngularJS 内置的指令外,我们还可以创建自定义指令. 你可以使用 .directive 函数来添加自定义的指令. 要调用自定义指令,HTML 元素上需要添加自定义指令名. 使用驼峰法来命 ...

  7. angular2的ngfor ngif指令嵌套

    angular2的ngfor ngif指令嵌套 ng2 结构指令不能直接嵌套使用,可使用<ng-container>标签来包裹指令 示例如下: <ul> <ng-cont ...

  8. AngularJS的表达式、指令的学习（2）

    最近没有那么忙,就来系统学习一下AngularJS吧,昨天简单的认识了一下,今天就从表达式入手吧,嘿嘿. 一.AngularJS 表达式 AngularJS表达式写在双大括号内:{{expressio ...

  9. Vue 2.x指令综合小练习

    实现效果如下: 代码实现如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset ...

随机推荐

  1. html常见标签使用

    <body> <!--标题标签--> <h1></h1> <h2></h2> <h3></h3> < ...

  2. java正则表达式获取指定HTML标签的指定属性值

    package com.mmq.regex; import java.util.ArrayList; import java.util.List; import java.util.regex.Mat ...

  3. 百度网盘API的操作--PCS 百度个人云存储 上传 ，下载文件

    来自http://blog.csdn.net/u014492257/article/details/39856403 另外需要所有API使用方法的请访问本人上传的资源(需要3个下载分的)链接: htt ...

  4. HDU 3652(数位DP)

    题目链接:B-number Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Tot ...

  5. Python 100例（下）

    如果你坚持到这了,哪就为自己鼓掌吧!坚持,你一定可以. 实例51: 题目:学习使用按位与&. #!/usr/bin/env  python# --*--coding:utf-8 --*--'' ...

  6. 向datagridview 添加行

    datagridview 已经绑定数据源且控件的AllowUserToAddRows设置为false时. ((DataTable)dataGridView1.DataSource).Rows.Add( ...

  7. （一）phoneGap之环境搭建教程及其example分析

    phoneGap之环境搭建教程及其example分析 一.环境搭建 与普通的开发android应用一样,phoneGap也同于原生android应用一样,环境相同,只是有部分不同,下面就我做理解,进行 ...

  8. ZOJ 3946 Highway Project

    1.迪杰斯特拉最小堆 #include<cstdio> #include<cstring> #include<cmath> #include<map> ...

  9. (简单) POJ 2240 Arbitrage，SPFA。

    Description Arbitrage is the use of discrepancies in currency exchange rates to transform one unit o ...

  10. Cdoefroces #354

    A题 题意:给定一些数,然后求一次交换以后最大的数和最小的数之间的最大距离 分析:找到最大数和最小数的位置,然后判断是把位置大的移到最后还是把位置小的移到开始位置即可 #include <ios ...