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. OCMOD代码调整系统(Modification System)

    OCMOD 是一个允许用户上传压缩文件的系统,该压缩文件包含了XML, SQL和PHP文件,从而修改网站相关地方. OCMOD是opencart系统的代码调整系统,遵循GPL3协议免费使用. 如果OC ...

  2. HDU 5172 GTY's gay friends 线段树

    GTY's gay friends Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others ...

  3. android4.0 的图库Gallery2代码分析(一)

    最近迫于生存压力,不得不给人兼职打工.故在博文中加了个求点击的链接.麻烦有时间的博友们帮我点击一下.没时间的不用勉强啊.不过请放心,我是做技术的,肯定链接没病毒,就是我打工的淘宝店铺.嘻嘻.http: ...

  4. jetty compile

    lifecycle cant been covered, 需要m2e-extra,在elcipse marcketplace找,不是叫做这个名. <parent>上有lifecycle问题 ...

  5. 转 Android HttpClient post MultipartEntity - Android 上传文件

    转自  http://blog.csdn.net/hellohaifei/article/details/9707089 在Android 中使用HttpClient,MultipartEntity ...

  6. Android学习笔记之Intent(1)

    1.Intent指定启动目标组件 2.Intentfilter描述基本组件所在地址 3.其他包引入资源文件时记得引入R所在的包 package com.jikexueyuan.intent; impo ...

  7. Vmware克隆虚拟机后网卡eth0变eth1解决

    在克隆虚拟机的过程中,发现新克隆的机器的网卡由eth0变成了eth1,然而并没有eth1的配置文件. 1.#ip a 查看当前ip地址,发现是eth1网卡 2.#ll /etc/sysconfig/n ...

  8. 三种Dataase Mapping的系统架构

    ORM - O/R M - Object/Relational Mapping: A technique/idea used to map objects and thier individual r ...

  9. Cocos2dx 3.1.1 学习笔记整理(4)：事件监听与Action的初步使用

    项目忙,趁着刚才有点空,看了下触摸事件在新版本中怎么实现,遇到问题都是去:cocos2d-x-3.1.1\tests\cpp-tests\Classes下面找的,里面都是一些小例子. 首先新的CCNo ...

  10. 负载均衡 LVS+Keepalived

    系统  CentOS 5.6 X64 物理机 IP 10.10.10.104 Xen : 三台 CentOS 5.8 ip为: 10.10.10.106        10.10.10.107     ...