一个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的历史,我也就不多说了,能看到这篇文章的人都是有一定了解才能找到这个的. 我直接说下对这个库的基本使用吧. 我个人对一些好技术都是比较感兴趣的. 因为个人原因 喜欢接触一个好技术. 所 ...
随机推荐
- 伸缩放大的js
window.onload = function() { var div1 = document.getElementById('div1'); div1.onmous ...
- .net framework版本以及服务器部署问题
自己做了个官网,部署到服务器很多问题,发现targetframework为4.0,但是公司服务器的版本为:2.0.50727,但是公司一个项目用的lambda和linq就没有事,发现这个是3.5支持的 ...
- MVC与三层架构的关系
- Android-----------打开手机上的应用
##判断手机上是否存在应用,存在则打开 package com.funs.openApp.utils; import java.util.List; import android.c ...
- 分布式Session共享（一）：tomcat+redis实现session共享
一.前言 本文主要测试redis实现session共享的实现方式,不讨论如何让nginx参与实现负载均衡等. 二.环境配置 本测试在Window下进行 name version port Tomcat ...
- JAVA采用JDBC连接操作数据库详解
JDBC连接数据库概述 一.JDBC基础知识 JDBC(Java Data Base Connectivity,java数据库连接)是一种用于执行SQL语句的Java API,可以为多种关系数据库提供 ...
- TOJ3596 二维背包
3596. Watch The Movie Time Limit: 2.0 Seconds Memory Limit: 65536KTotal Runs: 424 Accepted Run ...
- [转载]opencv +linux
转载 ubuntu12.04安装openCV2.4.2(2012-08-08 16:54:06 参考http://www.samontab.com/web/2012/06/installing-ope ...
- C#串口扫描
1.传入serialport 和待显示串口的Commbox private void Search_AddSerialToComboBox(SerialPort MyPort, ComboBox My ...
- hadoop调优之一：概述
hadoop集群性能低下的常见原因 (一)硬件环境 1.CPU/内存不足,或未充分利用 2.网络原因 3.磁盘原因 (二)map任务原因 1.输入文件中小文件过多,导致多次启动和停止JVM进程.可以设 ...