angular的directive的属性和用法

app.directive(‘datetimepicker‘,function(){

return {

restrict : ‘A‘,

scope :true,

require:[‘?^add‘,‘?^minor‘],

link: function (scope, element, attrs) {}

})

restrict

//E:表示该directive仅能以element方式使用,即:<my-dialog></my-dialog>

//A: 表示该directive仅能以attribute方式使用,即:<div my-dialog></div>

//C:样式,即:<div class="my-dialog:product"></div>

//M:注释,即<!--directive:my-dialog:product-->

//可以简单理解为,当directive被angular 编译后,执行该方法

scope

//scope 当你写上该属性时,就表示这个directive不会从它的controller里继承$scope对象,而是会重新创建一个。

//scope的属性简洁但语法复杂,你可以用符号例如:&,@ 和=来定义属性的绑定方式。

使用
绑定父级作用域]监测属性的结果。eg:scope:{note:‘@‘}

在属性里解析表达式的,也构建了一个可重用的功能表达式构造器会生成了一个依赖父级scope的方法。你可以随时执行他,甚至可以监测到输出的变化。

使用
= 设置 本地scope与父级scope间的双向数据绑定。

template:‘{{note()}}‘

link:function(scope,element,attrs){

var parentGet=$parse(attrs.a);//$parse 将一个AngularJS表达式转换成一个函数

}

link

//element简单说就是$(‘my-dialog‘)

//attrs是个map,内容是你这个directive上的所有属性

//someCtrl,最后一个就是通过require获取的controller的名字,内部控制器

link:function(scope,element,attrs){

attrs.$observe(‘a‘,function(){ //检测属性的变化

});

}

?require选项的值可以分别用前缀?、^ 和?^进行修饰,也可以不修饰。相当于注入控制器

如果不进行修饰,比如require:‘thisDirective‘,那么require只会在当前指令中查找控制器

如果想要指向上游的指令,那么就是用^进行修饰,比如require:‘^parentDirective‘,如果没有找到,那就会抛出一个错误。

如果使用?前缀,就意味着如果在当前指令没有找到控制器,就将null作为link的第四个参数;

那么,如果将?和^结合起来,我们就可以既指定上游指令,又可以在找不到时,不抛出严重的错误

link:function(scope,element,attrs,resultCtrl){

angular.element(document.querySelector(‘#minor‘)).on(‘click‘,resultCtrl[1].reduceCount);

//resultCtrl[0]就是?^add,

//resultCtrl[1]就是?^minor,

}

时间: 2024-10-11 23:19:05

angular的directive的属性和用法的相关文章

angularjs的directive的属性含义详解

在介绍directive之前,我想先讲讲MVC这个框架的相关知识.这样可以更好的理解angular. 什么是MVC?mvc是一种设计模式,它把应用划分为三个部分,数据(模型),展现层(视图),控制交互层(控制器),一个时间的发生时这样的过程: 1.用户和应用产生交互 2.控制器的事件处理器被触发 3.控制器从模型中请求数据,并将其交给视图 4.视图将数据呈现给用户. 模型 模型用来存放应用的所有数据对象,模型不必知晓视图和控制器的细节,模型只需包含数据及直接和这些数据相关的逻辑.任何事件处理代码

关于angular 自定义directive

关于angular 自定义directive的小结 首先我们创建一个名为"expander"的自定义directive指令: angular.module("myApp",[]).directive("expander",function(){ return{ //directive的一些属性(键值对形式)如下: /* restrict:'EA', replace:true, transclude:true, scope:{...}, templ

IOS开发-UI学习-UITextField的具体属性及用法

直接上代码,里面有各种属性的用法注释,至于每个属性有多个可以设置的值,每个值的效果如何,可以通过查看这个函数参数的枚举量,并逐一测试. 1 //制作登陆界面 2 #import "ViewController.h" 3 4 @interface ViewController (){ 5 6 //定义全局变量(控件) 7 UITextField *username; 8 UITextField *password; 9 UIButton *resignbutton; 10 UIButto

CSS3的新增属性及其用法

CSS3的新增属性及其用法 现如今,随着 Web2.0 技术的流行,之前的 CSS2 标准和相关技术似乎已经满足不了日益增长的开发需求:人们需要实现更加美观.用户体验更好的界面.CSS3,这个新一代的标准应运而生.为了满足现有的对于 Web UI 的开发需求,它提供了一系列强大的功能,如许多新的 CSS 属性(文字,布局,颜色等等),各种 CSS 特效,甚至还支持 CSS 动画.元素的变换.这些 CSS 新特性在现阶段可以说都是非常强大和完善的,您只需要加入几行简单的 CSS 代码便可以实现出一

简述UIView的属性和用法

1.alpha 设置视图的透明度.默认为1. // 完全透明 view.alpha = 0; // 不透明 view.alpha = 1; 2.clipsToBounds // 默认是NO,当设置为yes时,超出当前视图的尺寸的内容和子视图不会显示. view.clipsToBounds = YES; 3.hidden // 默认是NO,当设置为yes,视图就看不见了. view.hidden = YES; 4.userInteractionEnabled // 默认为YES,如果设置为No,v

[Angular 2] Directive intro and exportAs

First, What is directive, what is the difference between component and directive. For my understanding, component is something like 'canvas', 'form', 'table'... they have the template and their own functionality. It defines how a html tag should work

CSS margin属性与用法教程

margin 属性是css用于在一个声明中设置所有 margin 属性的简写属性,margin是css控制块级元素之间的距离, 它们之间是透明不可见的. margin属性包含了margin left :距左元素块距离(设置距左内边距) :margin top:距头顶(上)元素块距离(设置距顶部元素块距离):margin right :距右元素块距离(设置距右元素块距) :margin bottom :底元素块距离(设置距低(下)元素块距).其二维构建图可见CSS属性二维图. margin的解剖图

[Angular] Custom directive Form validator

Create a directive to check no special characters allowed: import {Directive, forwardRef} from '@angular/core'; import {AbstractControl, NG_VALIDATORS, Validator} from '@angular/forms'; @Directive({ selector: `[formControl][no-special-chars], [formCo

XCODE UITextField 中的属性和用法

XCODE  UITextField  中的属性和用法 一些基本的用法 UIButton *button = [UIButton buttonWithType:UIButtonTypeRoundedRect]; CGRect frame =CGRectMake(110, 100, 100, 30); button.frame = frame; button.backgroundColor = [UIColor purpleColor]; [button setTitle:@"command&qu