首页 > Web开发 > 详细

Angularjs directive

时间:2016-01-26 18:36:28      阅读:129      评论:0      收藏:0      [点我收藏+]
.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
//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联系的桥梁

    技术分享

 

    技术分享

Angularjs directive

原文:http://www.cnblogs.com/ktsjk/p/5147069.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!