.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. Maven仓库

    http://search.maven.org/#search%7Cga%7C1%7C

  2. c# 反射应用之工厂

    反射是.net的核心功能,十分的强大.但是好像微软封装的太过了,作为程序员,在实际项目中我很少用到反射(估计是参加的大型项目太少了,需要交互第三方的项目太少了). 工厂模式是软件设计模式中重要的一种, ...

  3. LINUX centos 忘记密码

    entos7采用的是grub2,和centos6.x进入单用户的方法不同.但是因为用的是真机环境无法截图,所以只是大概描述以下思路. init方法 1.centos7的grub2界面会有两个入口,正常 ...

  4. is a 、like a、has a

    has a 代表的是对象和它的成员的从属关系.可以分为组合与聚合两种. 组合:表示两个对象是整体与部分的关系为强关系 聚合:表示两个对象是整体与部分的关系为弱关系 is a 它是类继承关系,只是覆盖了 ...

  5. flex页面刷新实现

    页面刷新:navigateToURL(new URLRequest("javascript:location.reload();"),"_self"); 关闭浏 ...

  6. 杭电ACM1004

    Let the Balloon Rise Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Oth ...

  7. AngularJs的UI组件ui-Bootstrap分享(九)——Alert

    alert指令会在页面上显示一条提示消息,效果是这样: 代码为: <!DOCTYPE html> <html ng-app="ui.bootstrap.demo" ...

  8. github代码收集推荐

    https://github.com/AFNetworking/AFNetworkinghttps://github.com/jessesquires/JSQMessagesViewControlle ...

  9. 第六篇——初尝Python,意犹未尽

    作业2的要求是选一个你从来没有学过的编程语言,试一试实现基本功能.那么在这里我准备学习Python语言进行学习,并尝试用Python写一写东西. http://www.runoob.com/ Pyth ...

  10. iOS开发笔记1:[转]导航栏里的"Back"按钮显示不出来

    最近项目中遇到一个问题,push过去的ViewController的Nav上面没有返回按钮,遂搜索资料,找到了以下文档.经测试i,问题解决. 原文地址:http://www.cnblogs.com/s ...