AngularJs的一些知识点-4

本文深入解析Angular中的指令配置项,包括priority、terminal等,并探讨如何利用这些配置项优化应用程序。同时,介绍了export module name的用途及其对依赖管理的影响。
  1. export module 的 name

    开发angular1.x + es6项目 的萌新可能经常会看到这样的写法:

    export default angular.module("moduleA", [])
       .service("ServiceA", ServiceA)
       .service("ServiceB", ServiceB)
       .name;

    那么这里为什么要export module的name呢?

    这是为了这个module的引用者方便,如果某个module改名了,所有依赖它的module可以不修改代码。

  2. 指令中的不常见配置项解读

    • priority:指令的优先级,默认为0, 常用指令优先级如下:

      • ngRepeat : 1000
      • ngSwitchWhen : 800
      • ngIf : 600
      • ngInclude : 400
      • ngView : 400
    • terminal:设置为true, 意味着元素上优先级小于当前指令的其他指令都不会执行, 也就是说执行到当前指令就结束了, 相同优先级的指令不包含在内.

    • templateNamespace:指定template的文档类型, 可选’html’、’svg’、’math’, 默认为’html’.

    • require:为了给父子指令或者兄弟指令的Controller之间搭建一个桥梁. 被require的指令的Controller会作为当前指令link函数的第四个参数. 这样就可以调用外部Controller的方法. 它的值与link函数的参数有以下几种对应方式:

      • 字符串: 对应单个controller

      • 数组: 对应一个数组, 通过顺序获取controller

      • 对象: key随便取, value为需要require的指令, 对应一个对象, 通过key获取controller

      • 修饰符如下表:

    修饰前缀意义
    在当前指令作用域查找
    ^在当前及父级作用域查找,如果没有找到会抛出一个错误
    ?在当前作用域没有找到时将null作为link的第四个参数
    ^?指定在当前作用域中查找,找不到时,不抛出严重的错误。
    ^^只会在父级节点查找.
    • replace:设置成true, Angular会用模板的内容来替换当前元素, 但是这里有个坑需要注意, 我们必须保证模板内容只有一个根节点, 否则会抛出Invalid Template Root Exception.

    • transclude:设置成true, 配合ngTransclude指令使用, 可以将指令包裹的子元素添加进模板进行编译, 但是这里又一个坑需要注意, 被包裹的子元只能访问指令外部的作用域 ( scope ) , 而不能访问指令自己的作用域.

    • bindToController:指令中通过scope:{}属性声明的变量仍然会被自动绑定到scope, 而不是控制器上, 通过设置bindToController为true, scope上的变量会自动绑定到控制器.

  3. 指令中scope下的绑定

    • ‘@’ 将独立作用域中的变量与DOM属性绑定,绑定结果总是一个字符串。

    • ‘<’ 单向数据绑定。

    • ‘=’ 双向数据绑定。

    • ‘&’绑定函数或执行表达式。

    • 写法上的一些差异。

      写法1:

      //scope属性
      {
      name: '@'
      }

      写法2:

      //scope属性
      {
      name: '@hi',
      }
      //html
      <my-directive hi='John'>

      当绑定到scope上的属性名和html里面的属性名一致时,可以简写为写法1的形式

      写法3:

      //scope属性
      {
      isOpen: '=?',
      }

      这种写法中的?和require中的修饰前缀?作用是类似的。用来指定属性是可选的,不会在绑定的属性是不可用的时候抛出Non-Assignable Expression

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值