这是《AngularJS》这本书里面提供的一个例子：

JS代码：

  1. var expanderModule=angular.module('expanderModule', [])
  2. expanderModule.directive('expander', function() {
  3.     return {
  4.         restrict : 'EA',
  5.         replace : true,
  6.         transclude : true,
  7.         scope : {
  8.             title : '=expanderTitle'
  9.         },
  10.         template : '<div>'
  11.                  + '<div class="title" ng-click="toggle()">{{title}}</div>'
  12.                  + '<div class="body" ng-show="showMe" ng-transclude></div>'
  13.                  + '</div>',
  14.         link : function(scope, element, attrs) {
  15.             scope.showMe = false;
  16.             scope.toggle = function toggle() {
  17.                 scope.showMe = !scope.showMe;
  18.             }
  19.         }
  20.     }
  21. });
  22. expanderModule.controller('SomeController',function($scope) {
  23.     $scope.title = '点击展开';
  24.     $scope.text = '这里是内部的内容。';
  25. });

HTML代码：

  1. <html ng-app='expanderModule'>
  2.     <head>
  3.         <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  4.         <script src="../angular-1.0.3/angular.min.js"></script>
  5.         <link rel="stylesheet" type="text/css" href="ExpanderSimple.css"/>
  6.     </head>
  7.     <body>
  8.         <div ng-controller='SomeController'>
  9.             <expander class='expander' expander-title='title'>
  10.                 {{text}}
  11.             </expander>
  12.         </div>
  13.     </body>
  14.     <script src="ExpanderSimple.js"></script>
  15. </html>

CSS代码：

  1. .expander {
  2.     border: 1px solid black;
  3.     width: 250px;
  4. }
  5.  
  6. .expander>.title {
  7.     background-color: black;
  8.     color: white;
  9.     padding: .1em .3em;
  10.     cursor: pointer;
  11. }
  12.  
  13. .expander>.body {
  14.     padding: .1em .3em;
  15. }

运行效果如下：

compile阶段进行标签解析和变换，link阶段进行数据绑定等操作！

在所有module都装载完毕在之后，compile(element)(scope);开始编译和链接整个dom树（其实就是调用dom上出现的指令）。

第一步：传递应用根节点给$compile函数，开始编译，返回link函数。

第二步：传递根作用域给link函数，开始链接（每个指令分为pre link 和 post link两个过程）

link函数的参数：

    1. scope
      这个就是当前control的$scope对象，没啥好说的。
    2. element
      这个是当前dom节点经过“jquery”处理过后的对象。用过jquery的都知道这个概念。当然这边的jquery是angular自己实现的阉割版的jquery。方法少了许多，不过按angular的话说，够用了。
    3. attrs
      这个对象包含，当前的dom节点上的各种属性标签的值。不过要注意的是这边会将xxx-bbb这种形式的改写成xxxBbb的这种驼峰形式。

AngularJS directive入门例子的更多相关文章

  1. 学习AngularJs:Directive指令用法（完整版）

    这篇文章主要学习AngularJs:Directive指令用法,内容很全面,感兴趣的小伙伴们可以参考一下   本教程使用AngularJs版本:1.5.3 AngularJs GitHub: http ...

  2. AngularJS快速入门指南13：表单

    一个AngularJS表单是一组输入型控件的集合. HTML控件 HTML输入型标签标包括: input标签 select标签 button标签 textarea标签 HTML表单 HTML表单将各种 ...

  3. AngularJS快速入门指南12：模块

    AngularJS模块定义了一个application. 模块是一个application中不同部分的容器. application中的所有控制器都应该属于一个模块. 带有一个控制器的模块 下面这个a ...

  4. AngularJS快速入门指南10：DOM节点

    AngularJS通过指令将application数据绑定到HTML DOM元素的属性上. ng-disabled指令 ng-disabled指令将AngularJS application数据绑定到 ...

  5. AngularJS快速入门指南05：控制器

    AngularJS控制器用来控制AngularJS applications的数据. AngularJS控制器就是普通的JavaScript对象. AngularJS控制器 AngularJS app ...

  6. angularjs directive 实例 详解

    前面提到了angularjs的factory,service,provider,这个可以理解成php的model,这种model是不带html的,今天所说的directive,也可以理解成php的mo ...

  7. 【Bootstrap Demo】入门例子创建

    本文简单介绍下如何来使用 Bootstrap,通过引入 Bootstrap,来实现一个最基本的入门例子. 在前一篇博文[Bootstrap]1.初识Bootstrap 基础之上,我们完全可以更加方便快 ...

  8. AngularJS快速入门指南20：快速参考

    thead>tr>th, table.reference>tbody>tr>th, table.reference>tfoot>tr>th, table ...

  9. AngularJS快速入门指南19：示例代码

    本文给出的大部分示例都可以直接运行,通过点击运行按钮来查看结果,同时支持在线编辑代码. <div ng-app=""> <p>Name: <input ...

随机推荐

  1. ServiceStack.OrmLite 笔记

    ServiceStack.OrmLite 笔记1 ServiceStack.OrmLite 这个东东就是个orm框架,可以实现类似ef的效果.具体的就不这里班门弄斧了. 支持 SqlServerDia ...

  2. hdu 2141 （二分）

    链接:http://acm.hdu.edu.cn/showproblem.php?pid=2141 Can you find it? Time Limit: 10000/3000 MS (Java/O ...

  3. 2.mybatis入门实例 连接数据库进行查询

    1.新建项目,添加mybatis和mysql的jar包 2.在mysql中新建表user[id,name,age] CREATE TABLE `users` ( `id` ) NOT NULL aut ...

  4. 复制选中的listbox内容

    private void lt_log_MouseClick(object sender, MouseEventArgs e) { Clipboard.SetDataObject(lt_log.Sel ...

  5. Codeforces Round #382 (Div. 2) C. Tennis Championship 斐波那契

    C. Tennis Championship time limit per test 2 seconds memory limit per test 256 megabytes input stand ...

  6. hdu 2196 Computer 树的直径

    Computer Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Problem ...

  7. scala的传名参数

    scala如果你想实现像if ,while等类似的控制结构,根本没有值要传入花括号{}直接的代码里.要怎么实现. 比如说,我们要实现一个断言的控制结构,myAssert(), myAssert函数参考 ...

  8. 转 Cocos网络篇[3.2](3) ——Socket连接（1）

    Cocos网络篇[3.2](3) ——Socket连接(1) 2015-03-05 22:24:13 标签:network http socket cocos [唠叨] 在客户端游戏开发中,使用HTT ...

  9. Python学习笔记13—错误和异常

    常见的异常:

  10. Python学习笔记12—类

    典型的类和调用方法: #!/usr/bin/env Python # coding=utf-8 __metaclass__ = type #新式类 class Person: #创建类 def __i ...