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. 一个完整的ant build.xml

    <?xml version="1.0" encoding="UTF-8"?> <project name="genwar" ...

  2. IE6下绝对定位元素父级宽高是奇数,绝对定位元素的right和bottom值会有1个像素的偏差

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  3. SDAU课程练习--problemC

    题目描述 Here is a famous story in Chinese history. "That was about 2300 years ago. General Tian Ji ...

  4. Android学习之Service(1)--->Started方式

    界面退出后进程程序还在运行,不会被杀死,如音乐播发器.后台下载等 注:本文只讨论Started方式 main.xml代码分析 <?xml version="1.0" enco ...

  5. MIME小知识

    http://www.alixixi.com/program/a/2008020514775.shtml 用户可以通过使用MIME以设置服务器传送多媒体如声音和动画信息,这一切可能通过CGI脚本来进行 ...

  6. js正则表达式大全（转）

    1. 正则表达式规则 1.1 普通字符 字母.数字.汉字.下划线.以及后边章节中没有特殊定义的标点符号,都是"普通字符".表达式中的普通字符,在匹配一个字符串的时候,匹配与之相同的 ...

  7. python数组查找算法---bisect二分查找插入

    1 实例 这个模块只有几个函数, 一旦决定使用二分搜索时,立马要想到使用这个模块 [python] view plaincopyprint? import bisect L = [1,3,3,6,8, ...

  8. process想停就停，真爽

    kill -STOP 18168 kill -STOP 18310 kill -CONT 18310 kill -CONT 18168

  9. Java中的数组越界问题

    Java中数组初始化和OC其实是一样的,分为动态初始化和静态初始化, 动态初始化:指定长度,由系统给出初始化值 静态初始化:给出初始化值,由系统给出长度 在我们使用数组时最容易出现的就是数组越界问题, ...

  10. R语言相关工具

    R: 下载 R语言的基础工具,包括R编译器,R控制台等 RStudio:下载 R程序集成开发环境.特别好用,包括一系列的集成工具. Rtools:下载 Windows环境下,编译R包的工具库.也可以用 ...