<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控制div水平垂直居中显示

    <style>#info{height:0px; width:0px;top:50%; left:50%;position:absolute;}#center{background:#FF ...

  2. VPS，虚拟主机，云主机，独立服务器区别

    作者:张朝权链接:http://www.zhihu.com/question/25507629/answer/105594087来源:知乎著作权归作者所有,转载请联系作者获得授权.   独立服务器独立 ...

  3. C#按钮打开浏览器,网址

    1.加入 using System.Diagnostics; 2. private void button_main_baidu_Click(object sender, EventArgs e) { ...

  4. OpenRisc-39-ORPSoC,or1200的memory hierarchy整体分析

    引言 前面我们简单分析了ORPSoC的整体结构,or1200_top的整体结构,or1200_cpu的整体结构. 并对ORPSoC的启动过程,ORPSoC的debug子系统,clock子系统进行了介绍 ...

  5. php+mysql将大数据sql文件导入数据库

    <?php $file_name = "d:test.sql"; $dbhost = "localhost"; $dbuser = "root& ...

  6. 【Nutch2.2.1源代码分析之4】Nutch加载配置文件的方法

    小结: (1)在nutch中,一般通过ToolRunner来运行hadoop job,此方法可以方便的通过ToolRunner.run(Configuration conf,Tool tool,Str ...

  7. iframe的操作

    获取iframe的window,获取Iframe的document,获取父页面的window,某个环境是否iframe,动态创建iframe 这是demo.html,这个页用iframe嵌入了ifra ...

  8. Ibatis 后台打印完整的sql语句

    http://blog.csdn.net/deng11342/article/details/9122015 http://www.blogjava.net/libin2722/archive/200 ...

  9. [GitPython]使用python管理你的git库

    你想使用python来自动管理一个git仓库的时候,GitPython是一个不错的选择. 简介: 先看看下面这段代码: from git import Repo repo = Repo("~ ...

  10. python 远程统计文件

    #!/usr/bin/python #encoding=utf-8 import time import os import paramiko import multiprocessing #统计文件 ...