<body>

         <div ng-controller="myCtrl">

               <hello-word></hello-word>

         </div>

         <script type="text/javascript">

             angular.module('app',[])

             .directive('hello-word',function($document){

                 return {

                     /***

                         'E':<hello-word></hello-word>

                         'A': <div hello-word ></div>

                         'C': <div class="hello-word: exp;"></div> Class 类名

                         'M': <!-- directive: hello-word exp --> Comment 注释

                     */

                     restrict: 'E',

                     // templateUrl: 代表一个路径下的html片段

                     template: '<div>hello word!!!</div>',

                     //替换掉原标签

                     replace: true,

                     /**

                         对特定的元素注册事件。需要用到scope参数来实现dom元素的一些行为

                         function link(scope, element, attrs, controller) { ... }

                         在link阶段要执行的函数，这个属性只有当compile属性没有设置时才生效

                         常用参数为scope，element和attrs，分别是当前元素所在的scope，dom元素和元素上的属性们，其它的以后细说

                         directive基本上都会有此函数，可以注册事件，并与scope相绑

                     */

                     link: function(scope, element, attrs){

                         angular.element(element).bind('click',function(){

                             alert('hello word!!!!');

                         })

                     },

                     /**

                         想在dom渲染前对它进行变形，并且不需要scope参数

                         想在所有相同directive里共享某些方法，这时应该定义在compile里，性能会比较好

                         返回值就是link的function，这时就是共同使用的时候

                     */

                     compile: function(){

                     }

                 }

             })

             .controller('myCtrl',function($scope,$location){

             });

       </script>

 </body>

一个Demo就懂的Angular之directive的更多相关文章

  1. angular开发者吐槽react+redux的复杂：“一个demo证明你的开发效率低下”

    曾经看到一篇文章,写的是jquery开发者吐槽angular的复杂.作为一个angular开发者,我来吐槽一下react+redux的复杂. 例子 为了让大家看得舒服,我用最简单的一个demo来展示r ...

  2. Android 通知栏Notification的整合 全面学习 （一个DEMO让你完全了解它）

    在android的应用层中,涉及到很多应用框架,例如:Service框架,Activity管理机制,Broadcast机制,对话框框架,标题栏框架,状态栏框架,通知机制,ActionBar框架等等. ...

  3. 关于angular 自定义directive

    关于angular 自定义directive的小结 首先我们创建一个名为"expander"的自定义directive指令: angular.module("myApp& ...

  4. Android 通知栏Notification的整合 全面学习 （一个DEMO让你全然了解它）

    在android的应用层中,涉及到非常多应用框架.比如:Service框架,Activity管理机制,Broadcast机制,对话框框架,标题栏框架,状态栏框架.通知机制,ActionBar框架等等. ...

  5. 【转】 [置顶] Android 通知栏Notification的整合 全面学习 （一个DEMO让你完全了解它）

    在Android的应用层中,涉及到很多应用框架,例如:Service框架,Activity管理机制,Broadcast机制,对话框框架,标题栏框架,状态栏框架,通知机制,ActionBar框架等等. ...

  6. Angular2 不明真相第一个Demo例子

    如果不是去年换工作接触到AngularJS,估计是不会花时间去学习这个框架的,毕竟是前端的框架,不是自己熟悉的领域.但是为了混得下去,去年就学习了AngularJS的一些用法,当时还整理了一些积累 & ...

  7. 初识nginx之第一个demo

    商城项目做了一个多月了,想到必须用到负载均衡,简单了解了一下nginx,首先分享第一个demo,五月份上线后,会继续分享一系列相关知识. 在nginx根目录下,用了一个园友的批处理文件nginx.ba ...

  8. springMvc的第一个demo

    1.下载jar包 http://repo.spring.io/libs-release-local/org/springframework/spring/4.2.3.RELEASE/ 2.下载源码 j ...

  9. 如何在WTL和MFC中使用duilib及如何静态使用duilib库！（初级讲解 附带一个Demo）

    关于duilib的历史,我也就不多说了,能看到这篇文章的人都是有一定了解才能找到这个的. 我直接说下对这个库的基本使用吧. 我个人对一些好技术都是比较感兴趣的. 因为个人原因 喜欢接触一个好技术. 所 ...

随机推荐

  1. CSS基础知识笔记(一)

    css 样式由选择符和声明组成,而声明又由属性和值组成: 选择符: 又称选择器,指明网页中要应用样式规则的元素,如本例中是网页中所有的段(p)的文字将变成蓝色,而其他的元素(如ol)不会受到影响. 声 ...

  2. 找不到类型“IBatisService.boxManageService”，它在 ServiceHost 指令中提供为 Service 特性值，或在配置元素 system.serviceModel/serviceHostingEnvironment/serviceActivations 中提供。

    找不到类型“IBatisService.boxManageService”,它在 ServiceHost 指令中提供为 Service 特性值,或在配置元素 system.serviceModel/s ...

  3. 方法覆盖（override）”的要点

    方法覆盖要求子类与父类的方法一模一样,否则就是方法重载(overload)!请自行编写代码测试以下特性:在子类中,若要调用父类中被覆盖的方法,可以使用super关键字. 结论:          在“ ...

  4. javaWeb--jsp & jQuery

    jsp页面的基本构成:指令标签HTML标记语言注释   <!-- html注释 -->  <%-- java代码注释 -->   //html注释对jsp嵌入的代码不起作用,因 ...

  5. Oracle 10g体系结构及安全管理

    (1)               Oracle数据库服务器:数据库,实例 (2)               数据库:(1)物理存储—数据文件,控制文件,日志文件,(2)逻辑存储—表空间,段,区间, ...

  6. CSU 1119 Collecting Coins

    bfs+dfs 很复杂的搜索题. 因为数据很小,rock最多只有5个,coin最多只有10个,移动rock最多4^5=1024种状态: 思路: 每次先把当前状态能拿到的coin拿走,并将地图当前位置设 ...

  7. java基础总结——数组

    数组需要掌握的: 1.数组的定义 2.数组的内存分配及特点 3.数组操作常见问题 4.数组常见操作 5.数组中的数组(理解) 数组唯一属性:length,即数组的长度. 1.数组定义 格式一: 元素类 ...

  8. memcached在Windows下的安装

    memcached简介详情请谷歌.这里介绍如何在windows下安装. 1.下载     下载地址:http://download.csdn.net/detail/u010562988/9456109 ...

  9. CoreData的数据迁移

    CoreData的数据迁移   很多人说CoreData坑多,现在才感觉到,今天上午写代码的时候,发现了一个大问题. 过程如下,之前我自己给coredata的实体添加了几个字段,后来网上的一个用户说我 ...

  10. Oracle主键约束、唯一键约束、唯一索引的区别

    一般,我们看到术语“索引”和“键”交换使用,但实际上这两个是不同的.索引是存储在数据库中的一个物理结构,键纯粹是一个逻辑概念.键代表创建来实施业务规则的完整性约束.索引和键的混淆通常是由于数据库使用索 ...