发表于: 2017-06-18 22:59:04

1 806


今天完成的事情

学习angular自定义指令;

完成简单的分页功能

收获

anguarl中通过使用.directive函数来添加自定义指令;

使用驼峰命名法来命名一个指令,比如runoobDirective,使用时需要以-进行分割,html   <runoob-directive>< /runoob-directive >

.directive函数有两个参数,第一个是指令的名字,第二个是一个函数,返回一个对象;

1restrict属性,可选值为E  A  C  M 该属性定义指令以哪种方式被声明:

 

2priority属性

该属性值为数值型,代表优先级,大多数指令会忽略该属性而使用默认值0。在同一个元素上,优先级更高的属性会被先调用,同一优先级的则是先声明的先调用。

3 terminal属性

 该属性值为布尔型,默认为false。这个属性是用来告诉AngularJS,当该指令值为false时是否停止运行当前元素上比本指令优先级低的指令(同优先级的仍然会运行)。 
  一个例子是ngViewngIfngIf的优先级略高于ngView,如果ngIf表达式为false,那么ngView就不会被执行。

4 template属性

template属性值为字符串或函数。如果是字符串,那么它代表着一段HTML文本,如果是函数,它可以接收两个参数tElementtAttrs,其中t代表template,该词是相对与instance而言的,也就所是所谓的模板和实例,该函数会返回一个代表模板的字符串。故无论是字符串还是函数,template代表的就是一个HTML模板。 
  模板字符串中至少得有一个根DOM元素,即使它只有一个文本节点,另外由于字符串多行必须使用+号或者用\,使得维护起来非常麻烦以及不美观,所以强烈推荐使用templateUrl templateUrl属性值可以是字符串或函数。如果是字符串,那么它代表了一个外部HTML文件的路径,如果是函数,那么它同样有tElementtAttrs两个参数,函数返回一个外部HTML文件路径的字符串。

5 replace属性

replace属性是个布尔值,默认为false。默认情况下,templatetemplateUrl提供的模板会被当做子元素插入到调用此指令的元素内部。而如果设置该属性为true,那么会替代该元素。

6 scope属性

true:从当前作用域对象继承一个新的作用域对象

false(默认):直接调用当前作用域对象

对象:创建一个与当前作用域隔离的作用域对象

7 transclude属性

该属性值为布尔值,默认为false。该值表示是否使用指令所在元素其中的内容的模板整个传进来,放到template中声明ng-transclude指令的地方。最常用的用法是用指令创建一个布局,然后使用指令把实际内容传进来,这样就可以复用布局了。 

8 compilelink属性

 compile属性值与link属性值都是一个函数,link函数又返回一个具有pre(一般称为pre-link)post(一般称为post-link)函数的对象(如果只返回一个函数,那么是post-link函数)。compile属性与link属性是互斥的,如果同时存在会忽略link属性。也就是说,如果有compile函数也有prepost-函数,那么就不能有link属性,只能将包含pre函数和post函数的对象由compile函数来返回。

遇到的问题

暂无

明天计划的事情

完善分页功能

写搜索功能、时间插件



返回列表 返回列表
评论

    分享到