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. Android EditText的设置(转)

    1.输入法Enter键图标的设置: 软件盘的界面替换只有一个属性android:imeOptions,这个属性的可以取的值有normal,actionUnspecified,actionNone,ac ...

  2. pycharm 安装venv的依赖包

    (venv)$ pip install -r requirements.txt

  3. Struts2.3.16日志（中）

    Result Configuration --Result 配置 当一个操作类方法完成后,它将返回一个字符串.字符串的值是用来选择一个元素的结果.一个操作映射的结果往往会有一组代表不同的可能的结果.一 ...

  4. 转：从web三层架构解析软件测试内容

    B/S架构的系统,都会使用如下的基础软件架构: 数据访问层:实现对数据的访问功能,如增加.删除.修改.查询数据. 业务逻辑层:实现业务的具体逻辑功能,如学生入学.退学.成绩管理等. 页面显示层:将业务 ...

  5. PS2鼠标+LCD12864实验(调试未成功)

    此试验我一人调试许久都未成功,但发送ff时,读出来的数据确是对的,一开始让我窃喜,但发送f4时,读出来的数据确是错的,哎让苦恼啊,能力有限,只能先暂时就这样吧,那位什么还要贴出来呢,有两个原因: 1. ...

  6. Spring 笔记1

    1.在java开发领域,Spring相对于EJB来说是一种轻量级的,非侵入性的Java开发框架,曾经有两本很畅销的书<Expert one-on-one J2EE Design and Deve ...

  7. rsa or dsa?

    http://www.linuxquestions.org/questions/linux-security-4/which-is-better-rsa-or-dsa-public-key-12593 ...

  8. DRBD（数据镜像）+hearbeat（自动切换）

    DRBD 数据镜像软件 一.DRBD介绍 1.1.数据镜像软件DRBD介绍 分布式块设备复制(Distributed Relicated Block Deivce,DRBD),是一种基于软件.基于网络 ...

  9. php dependency innjection

    You’ve probably heard of the acronym SOLID by now, which is an object oriented programming paradigm ...

  10. openstack controller ha测试环境搭建记录（十五）——创建实例

    # source demo-openrc.sh # ssh-keygenGenerating public/private rsa key pair.Enter file in which to sa ...