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. 2304: Lights Out(枚举)

    枚举第一行所有可能的的情况 #include<iostream> #include<cstdio> #include<cstring> #include<al ...

  2. 归心似箭，IT达人分享抢票攻略

    [51CTO专稿]随着春节一天天临近,“购票难”的问题也愈发凸显,猎豹.火狐.360等“春运抢票神器”占领了各大网站的重要版面,“技术抢票”成为炙手可热的话题,看看身为程序员的邓以克是如何抢到回家的票 ...

  3. DOS日期和时间 - Robin Hu的专栏 - 博客频道 - CSDN.NET

    body { font-family: Microsoft YaHei UI,"Microsoft YaHei", Georgia,Helvetica,Arial,sans-ser ...

  4. 自行修改android.jar使其包含隐藏api

    1) 从指定版本的rom内获取到framework.jar 2) 解压framework.jar和android sdk内的android.jar 3) 将framework.jar解出来的东西拷到a ...

  5. CodeForces 591A Wizards' Duel

    水题 #include<cstdio> #include<cstring> #include<cmath> #include<algorithm> us ...

  6. Qt5：无边框窗口拖动

    在窗口程序中,无边框窗口程序一般需要特殊处理才能拖动 Qt中,要实现无边框窗口的拖动,需要重新实现 mousePressEvent 和 mouseMoveEvent 俩虚函数 void Widget: ...

  7. BodyContent揭秘及定制复杂的JSP标签

    BodyContent揭秘及定制复杂的JSP标签 标签: jspintegerwrapperclass设计模式 2010-08-30 11:30 4555人阅读 评论(0) 收藏 举报  分类: HT ...

  8. xml 解析 python

    1 综述 有很多种解析方法. (1)  DOM   缺点是:1 不能解析格式不正确或者不规则xml  2据说只能解析utf-8格式,非utf-8需要转码 与SAX比较,DOM典型的缺点是比较慢,消耗更 ...

  9. extjs入门

    http://blog.csdn.net/xiebaochun/article/details/36414437

  10. 左倾堆（C#）

    参考:http://www.cnblogs.com/skywang12345/p/3638384.html using System; using System.Collections.Generic ...