转自: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简述的更多相关文章

  1. 学习AngularJs:Directive指令用法

    跟我学AngularJs:Directive指令用法解读(上) http://blog.csdn.net/evankaka/article/details/51232895 跟我学AngularJs: ...

  2. angularjs directive 实例 详解

    前面提到了angularjs的factory,service,provider,这个可以理解成php的model,这种model是不带html的,今天所说的directive,也可以理解成php的mo ...

  3. 学习AngularJs:Directive指令用法(完整版)

    这篇文章主要学习AngularJs:Directive指令用法,内容很全面,感兴趣的小伙伴们可以参考一下   本教程使用AngularJs版本:1.5.3 AngularJs GitHub: http ...

  4. Angularjs directive全面解读(1.4.5)

    说到Angularjs directive即指令,可以这么说Angularjs的灵魂就是指令,学会Angularjs指令那么你的Angularjs的武功就修炼了一半了,当然这只是鄙人的一点点独到见解, ...

  5. angularjs directive (自定义标签解析)

    angularjs directive (自定义标签解析) 定义tpl <!-- 注意要有根标签 --> <div class="list list-inset" ...

  6. 步入angularjs directive(指令)--点击按钮加入loading状态

    今天我终于鼓起勇气写自己的博客了,激动与害怕并存,希望大家能多多批评指导,如果能够帮助大家,也希望大家点个赞!! 用angularjs 工作也有段时间了,总体感觉最有挑战性的还是指令,因为没有指令的a ...

  7. AngularJS Directive 隔离 Scope 数据交互

    什么是隔离 Scope AngularJS 的 directive 默认能共享父 scope 中定义的属性,例如在模版中直接使用父 scope 中的对象和属性.通常使用这种直接共享的方式可以实现一些简 ...

  8. [译]angularjs directive design made easy

    原文: http://seanhess.github.io/2013/10/14/angularjs-directive-design.html AngularJS directives很酷 Angu ...

  9. AngularJS directive 指令相关记录

    .... .directive('scopeDemo',function(){ return{ template: "<div class='panel-body'>Name: ...

随机推荐

  1. shell 字符串处理汇总(查找,替换等等)

    字符串: 简称“串”.有限字符的序列.数据元素为字符的线性表,是一种数据的逻辑结构.在计算机中可有不同的存储结构.在串上可进行求子串.插入字符.删除字符.置换字符等运算. 字符: 计算机程序设计及操作 ...

  2. 【python】-- 类的装饰器方法、特殊成员方法

    装饰器方法 类的另外的特性,装饰器方法:静态方法(staticmethod).类方法(classmethod).属性方法(property) 一.静态方法 在方法名前加上@staticmethod装饰 ...

  3. 洛谷 1641 [SCOI2010]生成字符串

    题目戳这里 一句话题意 求\(C_{m+n}^{m}\)-\(C_{m+n}^{m-1}\) Solution 巨说这个题目很水 标签居然还有字符串? 但是我还不很会用逆元真的太菜了,还好此题模数P为 ...

  4. Js编写的菜单树

    只需要提供这种JSON格式就ok了 其他的都可以直接引用这个代码进去 var testMenu=[ { "name": "一级菜单", "submen ...

  5. windows下安装PyQt4

    第一步:确认自己电脑上的Python版本.然后下载对应的.whl文件下载 第二步:https://www.lfd.uci.edu/~gohlke/pythonlibs/#pyqt4上下载对应版本版本的 ...

  6. YiiFramework(PHP)

    Yii is a high-performance PHP framework best for developing Web 2.0 applications. Ref:http://www.yii ...

  7. 使用 Python 为 KVM 编写脚本,第 1 部分: libvirt

    虚拟化是目前市场上大多数服务器操作系统的标准设备.在 Linux® 的世界里,服务器虚拟化有两个主要选择:基于 Kernel 的虚拟机 (KVM) 和 Xen.KVM 是 Red Hat 和其他公司采 ...

  8. QT设置QToolBar带有图标和文字

    ui->mainToolBar->setToolButtonStyle(Qt::ToolButtonTextBesideIcon);

  9. Python基础(2)_数字和字符串类型

    一.数据类型 1.数字 整型 Python的整型相当于C中的long型,Python中的整数可以用十进制,八进制,十六进制表示. >>> --------->默认十进制 > ...

  10. 一张图学习vim常用命令

    一张图学习vim常用命令