美文网首页
Angular之指令

Angular之指令

作者: 我家的猫子在哪里 | 来源:发表于2017-11-09 18:02 被阅读0次

    angular中指令大致可以理解为一种组件,它具有dom元素,也具有自身的事件处理,还可以与外部其他进行通信。下面我们说一下整个指令的构成。

   name可选的参数,指令的名称。priority优先级,在dom中包含多个指令的时候,优先级的高低是在compile函数执行之前的排序,高优先级则先编译执行,但是相同优先级并没有规定先后。teminal终端,如果设置为true那么将会在dom的指令集合中最后被执行。template字符串或着函数返回一个构成dom的字符串。replace设置为true后template将会替代掉自定义的标签。templateUrl返回一个代表html段,transclude大致理解为将指令包裹的元素放到指令模版的特定位置。

   scope代表指令的作用域,设置为false代表继承父作用域,跟随父亲的值改变;设置为true表示继承父作用域并且创建自己的作用域,跟随父亲的值改变但是自己的改变不影响父亲的值;设置为对象的时候,表示创建一个独立的隔离的作用域,父作用域的值与子作用域的值互不影响,但是可以通过相关策略去访问父作用域的值:@字符串单向绑定父作用域的值,=字符串双向绑定父作用域的值,&函数名绑定父作用域的方法。

   controller可以是字符串也可以是个函数,字符串的时候将字符串作为控制器的名字,如果是个函数,需要注意一些特殊的服务,$scope与指令元素相关联的作用域,$element当前指令对应的元素,$attrs当前元素属性组成的对象,$transclude嵌入链接函数,实际被执行用来克隆或者操作dom中的函数。指令的控制器和link函数可以进行互换,区别在于,控制器主要用来提供可在指令间复用的行为,可对外提供与外部交互的接口,link只能在当前指令内定义行为。controllerAs作为controller别名。

   require字符串或者数组,字符串代表另一个指令的名字,require的参数值,没有前缀会在自身提供的控制器中查找,如果找不到控制器则报错,前缀?在当前指令中查找如果没有找到则返回null给link,前缀^如果当前指令没有找到控制器就会查找父元素的控制器,前缀?^如果当前元素和父元素查找不到控制器则返回null给link函数。

   compile和link,compile可以返回一个对象或者函数,link负责将作用域和dom链接。其他的等剩下我找到别的具体的有意思的关于指令的文档在作补充吧。

相关文章

  • angular内置指令相关知识

    大纲 1、angular指令的分类2、angular指令之——组件3、angular指令之——属性指令 (ngSt...

  • 重构过程中的信息记录二

    Angular深入理解之指令 angular 事件绑定/属性绑定 @HostListener ,@HostBind...

  • Angular之指令

    angular中指令大致可以理解为一种组件,它具有dom元素,也具有自身的事件处理,还可以与外部其他进行通信。...

  • 自定义指令(上)

    简介 在常用指令的章节中我们讲了Angular提供的指令,这些指令是Angular内部封装好指令,我们开箱...

  • 初涉angular的总结

    初涉angular之自定义指令 1.自定义指令 在app.module声明指令,在app.module的decla...

  • Angular - 指令

    前言 使用指令的优势在于,我们无需太多关心指令的内部实现(当给 Angular 应用添加所需指令后,Angular...

  • angular指令之scope

    我们来创建一个自定义指令 使用自定义指令像上面一样的确不错,但是如果你想要对每一个指令渲染出来的按钮定制化,则好像...

  • Angular 指令,管道,服务

    1. 指令 Directive 指令是 Angular 提供的操作 DOM 的途径。指令分为属性指令和结构指令...

  • 2018-10-19 angular2+安装及常用npm指令

    一、angular2+安装步骤 二、angular2+ npm常用指令

  • Angular ngIf 跟他的新伙伴 else 和 then

    参考:https://angular.cn/api/common/NgIf Angular 扩展了ngIf 指令,...

网友评论

      本文标题:Angular之指令

      本文链接:https://www.haomeiwen.com/subject/dmmymxtx.html