AngularJS directive简述
转自:http://segmentfault.com/q/1010000002400734
官方API:http://docs.angularjs.cn/api/ng/service/$compile
一个民间详细介绍:http://blog.51yip.com/jsjquery/1607.html
问:
angular.module('docsTransclusionExample', [])
.controller('Controller', ['$scope', function($scope) {
$scope.name = 'Tobias';
}])
.directive('myDialog', function() {
return {
restrict: 'E',
transclude: true,
scope: {},
templateUrl: 'my-dialog.html',
link: function (scope, element) {
scope.name = 'Jeff';
}
};
});
答:
1.restrict
E: 表示该directive仅能以element方式使用,即:<my-dialog></my-dialog>
A: 表示该directive仅能以attribute方式使用,即:<div my-dialog></div>
EA: 表示该directive既能以element方式使用,也能以attribute方式使用 2.transclude
你的directive可能接受页面上的其他html内容时才会用到,建议你先去掉该参数。有些高阶了。 3.scope
当你写上该属性时,就表示这个directive不会从它的controller里继承$scope对象,而是会重新创建一个。 4.templateUrl
你的directive里的html内容 5.link
可以简单理解为,当directive被angular 编译后,执行该方法
这里你说的没错,link
中的第一个参数scope
基本上就是你说的上面写的那个scope
。
element
简单说就是$('my-dialog')
attrs
是个map,内容是你这个directive
上的所有属性,例如:你在页面上如果这样写了directive
:
<my-dialog type="modal" animation="fade"></my-dialog>
那attrs
就是:
{
type: 'modal',
animation: 'fade'
}
AngularJS directive简述的更多相关文章
- 学习AngularJs:Directive指令用法
跟我学AngularJs:Directive指令用法解读(上) http://blog.csdn.net/evankaka/article/details/51232895 跟我学AngularJs: ...
- angularjs directive 实例 详解
前面提到了angularjs的factory,service,provider,这个可以理解成php的model,这种model是不带html的,今天所说的directive,也可以理解成php的mo ...
- 学习AngularJs:Directive指令用法(完整版)
这篇文章主要学习AngularJs:Directive指令用法,内容很全面,感兴趣的小伙伴们可以参考一下 本教程使用AngularJs版本:1.5.3 AngularJs GitHub: http ...
- Angularjs directive全面解读(1.4.5)
说到Angularjs directive即指令,可以这么说Angularjs的灵魂就是指令,学会Angularjs指令那么你的Angularjs的武功就修炼了一半了,当然这只是鄙人的一点点独到见解, ...
- angularjs directive (自定义标签解析)
angularjs directive (自定义标签解析) 定义tpl <!-- 注意要有根标签 --> <div class="list list-inset" ...
- 步入angularjs directive(指令)--点击按钮加入loading状态
今天我终于鼓起勇气写自己的博客了,激动与害怕并存,希望大家能多多批评指导,如果能够帮助大家,也希望大家点个赞!! 用angularjs 工作也有段时间了,总体感觉最有挑战性的还是指令,因为没有指令的a ...
- AngularJS Directive 隔离 Scope 数据交互
什么是隔离 Scope AngularJS 的 directive 默认能共享父 scope 中定义的属性,例如在模版中直接使用父 scope 中的对象和属性.通常使用这种直接共享的方式可以实现一些简 ...
- [译]angularjs directive design made easy
原文: http://seanhess.github.io/2013/10/14/angularjs-directive-design.html AngularJS directives很酷 Angu ...
- AngularJS directive 指令相关记录
.... .directive('scopeDemo',function(){ return{ template: "<div class='panel-body'>Name: ...
随机推荐
- shell 字符串处理汇总(查找,替换等等)
字符串: 简称“串”.有限字符的序列.数据元素为字符的线性表,是一种数据的逻辑结构.在计算机中可有不同的存储结构.在串上可进行求子串.插入字符.删除字符.置换字符等运算. 字符: 计算机程序设计及操作 ...
- 【python】-- 类的装饰器方法、特殊成员方法
装饰器方法 类的另外的特性,装饰器方法:静态方法(staticmethod).类方法(classmethod).属性方法(property) 一.静态方法 在方法名前加上@staticmethod装饰 ...
- 洛谷 1641 [SCOI2010]生成字符串
题目戳这里 一句话题意 求\(C_{m+n}^{m}\)-\(C_{m+n}^{m-1}\) Solution 巨说这个题目很水 标签居然还有字符串? 但是我还不很会用逆元真的太菜了,还好此题模数P为 ...
- Js编写的菜单树
只需要提供这种JSON格式就ok了 其他的都可以直接引用这个代码进去 var testMenu=[ { "name": "一级菜单", "submen ...
- windows下安装PyQt4
第一步:确认自己电脑上的Python版本.然后下载对应的.whl文件下载 第二步:https://www.lfd.uci.edu/~gohlke/pythonlibs/#pyqt4上下载对应版本版本的 ...
- YiiFramework(PHP)
Yii is a high-performance PHP framework best for developing Web 2.0 applications. Ref:http://www.yii ...
- 使用 Python 为 KVM 编写脚本,第 1 部分: libvirt
虚拟化是目前市场上大多数服务器操作系统的标准设备.在 Linux® 的世界里,服务器虚拟化有两个主要选择:基于 Kernel 的虚拟机 (KVM) 和 Xen.KVM 是 Red Hat 和其他公司采 ...
- QT设置QToolBar带有图标和文字
ui->mainToolBar->setToolButtonStyle(Qt::ToolButtonTextBesideIcon);
- Python基础(2)_数字和字符串类型
一.数据类型 1.数字 整型 Python的整型相当于C中的long型,Python中的整数可以用十进制,八进制,十六进制表示. >>> --------->默认十进制 > ...
- 一张图学习vim常用命令
一张图学习vim常用命令