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,而原来使用的日期控件的使用方式也需要改变,于是开始了倒腾,看了官方的 ...
随机推荐
- Linux学习 :移植U-boot_2016.09到JZ2440开发板
一.下载源码:ftp://ftp.denx.de/pub/u-boot/ 二.初始化编译: ①新建一个单板: cd board/samsung/ cp smdk2410 smdk2440 -rf ...
- android 初步了解应用Gson 解析Json数据
1,因为没有服务器返回数据,对于Tomcat又懒得去配,所以我直接把数据写死到app中 先写一个实体类,便于操作 /** * 实体类 */ public class Person { int id ; ...
- 在mac上获取iphone当前屏幕截图
xcode->windows->devices->take screenshot :在当前作用域下,JS代码执行之前,浏览器首先会把所有带var和function关键字的进行提前的声明或者定义var num = 12;声明(declare): var num; ...
- ibatis入门教程
转载自 http://www.cnblogs.com/ycxyyzw/archive/2012/10/13/2722567.html iBatis 简介: iBatis 是apache 的一个开源项 ...
- Operational Amplifiers
1>.Operational Amplifiers:different from the resistor,the inductor and the capacitor,it's a multi ...
- 打不开tomcat
org.xml.sax.SAXParseException; lineNumber: 14; columnNumber: 59; schema_reference.4: 无法读取方案文档 'http: ...
- PyAutoGUI-python版的autoit/AHK
简单介绍各个图形界面自动操作的python库,类似按键精灵\autoit\ahk(autohotkey)等等这些自动化工具.这类python库不是只是用来实现自动游戏之类的程序,业界也用这些库来做GU ...