一个Demo就懂的Angular之directive
<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的更多相关文章
- angular开发者吐槽react+redux的复杂：“一个demo证明你的开发效率低下”
曾经看到一篇文章,写的是jquery开发者吐槽angular的复杂.作为一个angular开发者,我来吐槽一下react+redux的复杂. 例子 为了让大家看得舒服,我用最简单的一个demo来展示r ...
- Android 通知栏Notification的整合 全面学习 （一个DEMO让你完全了解它）
在android的应用层中,涉及到很多应用框架,例如:Service框架,Activity管理机制,Broadcast机制,对话框框架,标题栏框架,状态栏框架,通知机制,ActionBar框架等等. ...
- 关于angular 自定义directive
关于angular 自定义directive的小结 首先我们创建一个名为"expander"的自定义directive指令: angular.module("myApp& ...
- Android 通知栏Notification的整合 全面学习 （一个DEMO让你全然了解它）
在android的应用层中,涉及到非常多应用框架.比如:Service框架,Activity管理机制,Broadcast机制,对话框框架,标题栏框架,状态栏框架.通知机制,ActionBar框架等等. ...
- 【转】 [置顶] Android 通知栏Notification的整合 全面学习 （一个DEMO让你完全了解它）
在Android的应用层中,涉及到很多应用框架,例如:Service框架,Activity管理机制,Broadcast机制,对话框框架,标题栏框架,状态栏框架,通知机制,ActionBar框架等等. ...
- Angular2 不明真相第一个Demo例子
如果不是去年换工作接触到AngularJS,估计是不会花时间去学习这个框架的,毕竟是前端的框架,不是自己熟悉的领域.但是为了混得下去,去年就学习了AngularJS的一些用法,当时还整理了一些积累 & ...
- 初识nginx之第一个demo
商城项目做了一个多月了,想到必须用到负载均衡,简单了解了一下nginx,首先分享第一个demo,五月份上线后,会继续分享一系列相关知识. 在nginx根目录下,用了一个园友的批处理文件nginx.ba ...
- springMvc的第一个demo
1.下载jar包 http://repo.spring.io/libs-release-local/org/springframework/spring/4.2.3.RELEASE/ 2.下载源码 j ...
- 如何在WTL和MFC中使用duilib及如何静态使用duilib库！（初级讲解 附带一个Demo）
关于duilib的历史,我也就不多说了,能看到这篇文章的人都是有一定了解才能找到这个的. 我直接说下对这个库的基本使用吧. 我个人对一些好技术都是比较感兴趣的. 因为个人原因 喜欢接触一个好技术. 所 ...
随机推荐
- Javascript进阶篇——(DOM—getAttribute()、setAttribute()方法)—笔记整理
getAttribute()方法通过元素节点的属性名称获取属性的值.语法: elementNode.getAttribute(name) 1. elementNode:使用getElementById ...
- 使用DataReader
string sqlStr="select * from tb_news"; SqlCommand myCmd=new SqlCommand(sqlStr,myConn); myC ...
- Oracle触发器Trigger4触发条件_when的使用
/* 同一表使用所有条件 Create or replace trigger t5 Before insert,delete,update on 表名 For each row //plsql块 */ ...
- iOS的属性声明：retain和strong的区别
声明属性时用strong或者retain效果是一样的(貌似更多开发者更倾向于用strong).不过在声明Block时,使用strong和retain会有截然不同的效果.strong会等于copy,而r ...
- js判断是否为空的代码
方法一: var keyVal= $("#key").val(); if(keyVal==undefined || keyVal=="" || keyVal== ...
- 小试牛刀——爬topit.me的图片，附github简易上传教程
接触了scrapy ,发现爬虫效率高了许多,借鉴大神们的文章,做了一个爬虫练练手: 我的环境是:Ubuntu14.04 + python 2.7 + scrapy 0.24 目标 topit.me 一 ...
- Java学习笔记--AWT事件处理
1.事件模型 在整个事件触发和相应的过程中,主要涉及一下3类对象 (1) 事件源 : 引起时间的GUI对象,如各类组件(Button,Label,TextField),容器组件(Frame,panel ...
- mac/unix系统：C++实现一个端口扫描器
在比较早以前,我用过S扫描器, 以及大名鼎鼎的nmap扫描器, 可以快速扫描某个主机开放的端口, 今天使用C实现这样一个软件, 编译环境为Mac, 系统版本10.11.6: #include < ...
- SVN上传代码时代码失败
Description : You are not authorized to access the files in the repository.Suggestion : You might be ...
- 《Programming WPF》翻译 第9章 5.默认可视化
原文:<Programming WPF>翻译 第9章 5.默认可视化 虽然为控件提供一个自定义外观的能力是有用的,开发者应该能够使用一个控件而不用必须提供自定义可视化.这个控件应该正好工作 ...