.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的更多相关文章

  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: ...

  10. [转]通过AngularJS directive对bootstrap日期控件的的简单包装

    本文转自:http://www.cnblogs.com/Benoly/p/4109460.html 最近项目上了AngularJS,而原来使用的日期控件的使用方式也需要改变,于是开始了倒腾,看了官方的 ...

随机推荐

  1. 转-IE浏览器自动配置代理脚本-Proxy.PAC文件及PAC相关语法

    用笔记本上网时,往返家里和单位,因为单位是用的代理上网,家里是直接连接.因此每次都要修改IE的代理设置,虽然是个小事,但是每次都要修改总是有点烦 ,于是参考GOOGLE,写了一个自动配置代理的脚本.这 ...

  2. Linux学习 :中断处理机制 & poll机制

    中断是指在CPU正常运行期间,由于内外部事件或由程序预先安排的事件引起的CPU暂时停止正在运行的程序,转而为该内部或外部事件或预先安排的事件服务 的程序中去,服务完毕后再返回去继续运行被暂时中断的程序 ...

  3. MFC 对话框控件自动布局

    MFC 设计界面程序总是不够智能,没有这样,没有那样. 今天为了加强mfc功能,设计了一个自动布局的类,使用非常简单. 原理: 每个控件都有一个矩形区域,矩形区域就是控件在对话框中的显示位置和大小, ...

  4. 黑马程序员——C语言基础 流程控制 选择结构和循环结构

    ---恢复内容开始--- Java培训.Android培训.iOS培训..Net培训.期待与您交流! (以下内容是对黑马苹果入学视频的个人知识点总结) (一)流程控制 1> 顺序结构:默认的流程 ...

  5. Python 3.x 使用csv模块写入数据

    with open(fileName,'w',newline='') as f: self.fileNames = ['timestamp','elapsedtime'] writer = csv.D ...

  6. gdb调试报错记录

    警告信息: incompatible implicit declaration of built-in function ‘strlen’ [enabled by default] 原因:未添加< ...

  7. Qt之指针与float--setNum使用

    案例: quint8 ad[8] = {0,100,150,200,0,220,230,250}; QString str; QString str2; ab = (float)(*((float * ...

  8. AJAX进行数据交互的过程

    AJAX全称为"Asynchronous JavaScript and XML"(异步JavaScript和XML). 是指一种创建交互式网页应用的网页开发技术. 通过在后台与服务 ...

  9. sql的列的说明

    <#@ template debug="true" hostspecific="true" language="C#" #> & ...

  10. job console部署

    1. iis配置 1.1 应用程序池配置成经典模式 1.2 增加mini类型.svc,application/octet-stream 1.3 增加脚本映射,*.svc,%windir%\Micros ...