一个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的历史,我也就不多说了,能看到这篇文章的人都是有一定了解才能找到这个的. 我直接说下对这个库的基本使用吧. 我个人对一些好技术都是比较感兴趣的. 因为个人原因 喜欢接触一个好技术. 所 ...
随机推荐
- Oracle 批量操作
背景: 前两天由于工作需要做个业务单据接口(支持批量处理),一般有接口发布为批量,但访问数据库时还是一张张单据处理,本次访问数据库也是批量操作. 内容: 研究发现Oracle批量操作有两种:1)B ...
- 解决linux下oracle进入sqlplus环境中后退键显示^H、上下键无效与ctrl+l无法清屏等问题【weber出品必属精品】
习惯linux中上下键回退历史输入的人们肯定也希望sqlplus中也能实现相同的效果,可是不幸的是,sqlplus中不提供诸多方便的快捷键,这个时候我们就需要另外安装一个插件来实现这个想法. 这个插件 ...
- hdu 油菜花王国
Problem Description 程序设计竞赛即将到来,作为学校ACM集训队主力,小明训练一直很努力.今天天气不错,教练也心情大好,破例给各位队员放假一天,小明就骑着自己的小电驴到郊外踏青去了. ...
- C++中的数组和指针
#include <iostream> #include <set> using namespace std; int main() { ] = {,,,,,}; ]; p = ...
- mysql grant all privileges on
遇到了 SQLException: access denied for @'localhost' (using password: no) 解决办法 grant all privileges on * ...
- LeetCode-Divdend two Integers
题目: Divide two integers without using multiplication, division and mod operator. 思路分析 二分法.将除数不断增倍,而结 ...
- iscroll源码初涉
最近尝试做web app时候,用上了神器iScroll,鉴于功力尚浅,并没有完全用好神器,所以今天特意来认真学习! 翻开官网,目前的版本是5,但是相关的文章并不多,具体的文件版本是: iscroll. ...
- windows下配置lamp环境(1)---安装Apache服务器2.2.25
window下lamp成为wamp; 安装wamp环境的第一步是安装Apache服务器.下面开始安装步骤图文并茂. 一.双击安装包点“next”进行下一步,然后同意协议(这张图没有截):
- python的and与or剖析
1.只含有and的表达式 In []: and True and ' Out[]: ' In []: and and True and 'long' Out[]: 从左向右,遇到False,则返回改值 ...
- nodejs+express Mvc站点
nodejs+express Mvc站点 像asp.net Mvc一样开发nodejs+express Mvc站点 首先,我是个c#码农.从事Mvc开发已然4个年头了,这两年前端MVC的兴起,我也跟风 ...