Angularjs directive
.directive('mydir',function(){
return{
multiElement: true/false,
priority: number, //default: 0
terminal: true/false,
scope: false/true/{
myattr: '=attr',
myattr2: '@str',
myattr3: '&fun'
},
bindToController: true/false,
controller: function($scope,$element,$attrs,$transclude){
$transclude([scope], cloneLinkingFn, futureParentElement)
/*$transclude(function(clone, scope) {
element.append(clone);
transcludedContent = clone;
transclusionScope = scope;
});*/
},
//default: /'?dirName'/
require: 'dirName'/'?dirName'/'^dirName'/'^^dirName'/'?^dirName'/'?^^dirName',
controllerAs: 'string',
restrict: 'ACEM', //default: 'AE'
templateNamespace: 'html'/'svg'/'math',
template: 'string'/function(tElement,tAttrs){
return 'string';
},
templateUrl: 'string'/function(tElement,tAttrs){
return 'string';
},
replace: '已被弃用',
transclude: true/'element',
compile: function (tElement, tAttrs, transclude) {
//transclude已被弃用
return{
pre: function preLink(scope,iElement,iAttrs,controller){},
post: function postLink(scope,iElement,iAttrs,controller){}
}
//or
return function (scope,iElement,iAttrs,controller){
}
},
link: function (scope, iElement, iAttrs, controller, transcludeFn) {
//controller:myselfController/string/array 没有设置require的话默认自己的controller
//myselfController指指令自己的controller,没有的话设置为undefined
transclude([scope], cloneLinkingFn, futureParentElement);
}
}
})
priority: 在同一个元素上的指令,数字越大优先级越高,优先级越高controller和pre-link函数越先执行,而post-link则相反。该项不适用不在同一元素上的指令
terminal:如果设置为true,那么该指令最后一个执行,优先级低于该指令的指令全都被忽略
scope:<mydir attr='variable' attr2='{{str}}' on-ok='foo(a)'></mydir>
scope:{ attr:‘=’, attr2:'@', onOk:'&'}
'='表示与属性中的变量双向绑定,与父作用域中的变量会相互影响,所以 attr= 后面必须跟一个变量;‘@’表示引用一个字符串之类的表达式;
‘&’表示引用一个函数,首先用一个function把他包裹起来,因此onOk=function(a){ foo(a); },如果表达式中包含函数表达式,那么需要将函数写在
parent scope的function中,比如on-ok = ‘show=false’,直接用 ‘&’引用会报错, ‘show=false’ 只能用@,把他当做字符串处理,因此需要在父作用域中
$scope.isShow=function(){$scope.show=false},然后on-ok='isShow()'才行
bindToController:设置为true的话,此属性会作为scope与controller联系的桥梁
controller:
.directive('hello',function(){
return {
restrict:'AE',
template:'<span>hello{{ that.ab }}</span>',
controller:'parent', //parent是模块上注册的controller
controllerAs:'that'
}
})//使用controllerAs的话会将parent作为构造函数实例化,否则就直接使用parent里的$scope
require:

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: ...
- [转]通过AngularJS directive对bootstrap日期控件的的简单包装
本文转自:http://www.cnblogs.com/Benoly/p/4109460.html 最近项目上了AngularJS,而原来使用的日期控件的使用方式也需要改变,于是开始了倒腾,看了官方的 ...
随机推荐
- [SHTSC 2014] 信号增幅仪
最小覆盖圆算法.看着题解半蒙半抄的搞过去了… 主要参考以下http://blog.csdn.net/acdreamers/article/details/9406735http://blog.csdn ...
- Linux 内核常见宏定义
我们在阅读Linux内核是,常见到这些宏 __init, __initdata, __initfunc(), asmlinkage, ENTRY(), FASTCALL()等等.它们定义在 /incl ...
- linux内核学习之四 系统调用
一 概念区分 提到linux系统调用,不得不区分几个比较容易混淆的概念: 系统调用:系统调用就是一种特殊的接口.通过这个接口,用户可以访问内核空间.系统调用规定了用户进程进入内核的具体位置. 应用程 ...
- ubuntu方块乱码
更改下环境变量/etc/default/locale LANG="en_US.UTF-8"LANGUAGE="en_US:en"
- JS数组中every(),filter(),forEach(),map(),some()方法学习笔记!
ES5中定义了五种数组的迭代方法:every(),filter(),forEach(),map(),some(). 每个方法都接受两个参数:要在每一项运行的函数(必选)和运行该函数的作用域的对象-影响 ...
- dedecms qq咨询平均分配
qq后台页: qq_admin.php <style type="text/css"> <!-- * {margin:0; padding:0;} .wrap { ...
- Binding ConvererParameter
WPF中ConverterParameter不可以绑定,可以通过如下扩展来实现ConverterParameter的Binding: 1.自定义ConverterBindableBinding和Mul ...
- sql case when then else end
我们都知道SQL中适用case when then来转化数据库中的信息 比如 select (case sex when 0 then '男' else '女' end) AS sex from st ...
- js相关参考资料
[图片等比例适配:]http://www.cnblogs.com/zengxiangzhan/archive/2009/09/12/1565323.html
- CLR线程池
WaitCallback 表示要在 ThreadPool 线程上执行的回调方法. 创建委托,方法是将回调方法传递给 WaitCallback 构造函数. 您的方法必须具有此处所显示的签名. 如果想使用 ...