<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. 关闭程序 提示 C#

    private void Form1_FormClosing(object sender, FormClosingEventArgs e) { DialogResult dr = MessageBox ...

  2. C#图像处理（2）：给图片加白边

    C#图片处理给图片添加白边: /// <summary> /// 在图片上方加入白边 /// </summary> /// <param name="Img&q ...

  3. （二）原生JS实现 - 事件类方法

    事件处理 - 添加事件 var addEventHandler = function (oTarget, sEventType, fnHandler) { if (oTarget.addEventLi ...

  4. poj2385 简单DP

    J - 简单dp Crawling in process... Crawling failed Time Limit:1000MS     Memory Limit:65536KB     64bit ...

  5. 引用 exit、return、_exit、_Exit这几个函数的区别

    引用 exit.return._exit._Exit这几个函数的区别 一.exit函数和return函数的主要区别是: exit用于在程序运行的过程中随时结束程序,其参数是返回给OS的.也可以这么讲: ...

  6. ACM ICPC Team

    Link: https://www.hackerrank.com/challenges/acm-icpc-team/submissions/code/11617807 def count_max_to ...

  7. BasicExcel说明文档

    BasicExcel说明文档 BasicExcel原始链接:http://www.codeproject.com/Articles/13852/BasicExcel-A-Class-to-Read-a ...

  8. Java学习笔记--泛型

    一个泛型类就是具有一个或者多个类型变量的类. 我们可以只关注泛型,而不会为数据存储的细节而烦恼 . java泛型(一).泛型的基本介绍和使用 http://blog.csdn.net/lonelyro ...

  9. 从ASM迁移到ARM（1）：平台支持的迁移服务

    Azure上的ARM模式为用户带来更好的管理,更多新的特性,更好的体验,因此目前正在使用经典模式(ASM)的用户,在了解和使用了ARM之后,也在考虑如何将原来基于ASM模式的虚拟机,存储,网络等IAA ...

  10. #include<iostream>与#include<iostream.h>的区别

                                           转载于祝长洋的BLOG:http://blog.sina.com.cn/s/blog_514b5f600100ayks.h ...