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: ...
随机推荐
- 【BZOJ2724】[Violet 6]蒲公英 分块+二分
[BZOJ2724][Violet 6]蒲公英 Description Input 修正一下 l = (l_0 + x - 1) mod n + 1, r = (r_0 + x - 1) mod n ...
- python的协程和_IO操作
协程Coroutine: 协程看上去也是子程序,但执行过程中,在子程序内部可中断,然后转而执行别的子程序,在适当的时候再返回来接着执行. 注意,在一个子程序中中断,去执行其他子程序,不是函数调用,有点 ...
- 低秩近似 low-rank approximation
- ElasticSearch(二十一)正排和倒排索引
1.区别 搜索的时候,要依靠倒排索引:排序的时候,需要依靠正排索引,看到每个document的每个field,然后进行排序,所谓的正排索引,其实就是doc values 在建立索引的时候,一方面会建立 ...
- [luogu3393]逃离僵尸岛
[luogu3393]逃离僵尸岛 luogu 先把被禁止的点和新建的虚点n+1连0边 跑最短路,dis<=s的点价格为Q,否则为P, 再建图跑最短路 #define ll long long # ...
- MD_STOCK_REQUIREMENTS_LIST_API 取MD04的MRP Element
[转http://lz357502668.blog.163.com/blog/static/16496743201231941718527/]?MD_STOCK_REQUIREMENTS_LIST_A ...
- 很详细、很移动的Linux makefile 教程
近期在学习Linux下的C编程,买了一本叫<Linux环境下的C编程指南>读到makefile就越看越迷糊,可能是我的理解能不行. 于是google到了以下这篇文章.通俗易懂.然后把它贴出 ...
- HDU - 5703 Desert 【找规律】
题目链接 http://acm.hdu.edu.cn/showproblem.php?pid=5703 题意 给出一杯容量为N的水 每次至少喝1个单位 有多少种不同的方式喝完 比如 给出3 就有4种方 ...
- [原创]java WEB学习笔记37:EL表达式(简介,运算符,自动类型转换,保留字,隐含对象)
1.EL 简介 1)EL 全名为 Expression Language,它原本是 JSTL 1.0 为方便存取数据所自定义的语言 2)语法:EL 语法很简单,它最大的特点就是使用上很方便:${s ...
- python中返回函数
Python的函数不但可以返回int.str.list.dict等数据类型,还可以返回函数! 例如,定义一个函数 f(),我们让它返回一个函数 g,可以这样写: def f(): print 'cal ...