Skip to content

AngularJS其他知识点

Jump to bottom
1StepEngineer edited this page Aug 24, 2017 · 3 revisions

AngularJs1 知识点

form表单

表单验证className

  • .ng-valid{}
  • .ng-invalid{}
  • .ng-pristine{}
  • .ng-dirty{}

指令、控制器通信

通信方式共有以下几种方式：

  1. 基于scope继承的方式
  2. 基于event传播的方式
  3. service的方式

控制器与控制器通信

  1. 基于scope继承的方式（父子）
  • 基本类型：
    （1）初始子继承父，父变子变
    （2）子变父不变，而后父变子不变
  • 引用类型：
    （1）初始子继承父，父变子变
    （2）子变父变，而后父变子变
  1. 基于event传播方式 （父子，兄弟）
    $on,$emit,$broadcast
  • 子 ——> 父 $emit
    (1) 子scope中的控制器通过$scope.$emit注册一个向上传播事件
    (2) 该事件会经过每一层父scope,但是每一层父scope不会处理
    (3) 父要处理，需要在父scope上使用$scope.$on监听
  • 父 ——> 子 $broadcast
    从父到子，跟子集到父级一样，使用同样用$broadcast注册时间，用 $on 监听着
  • 兄弟间
    拥有同个父scope的子级scope之间，也就是兄弟/相邻scope之间的通信，其实是借助共同父级传递消息的

指令与指令通信

父子级指令间通信 指令相当一个模块，require告诉指令运行需要引用的其他指令，定义在 controller 上就能把方法和属性暴露出去

控制器与指令通信

指令内通过scope的参数值不同进行不同的数据和方法的共享

自定义服务

注意点：

  1. 服务名称不要以$开头，避免ng内部服务命名形式
  2. 建议将自定义服务注入在内置服务之后

脏检查工作过程

参考文档： http://www.angularjs.cn/A0a6

$watch

  • 每1个绑定到了dom上的数据都会向$watch 队列插入1个$watch
  • 监听变化
  • $watch(watchExpression, listener, objectEquality) 第3个参数：true，深度监听，监听对象（数组，对象）中每1个属性

$apply

将调用事件放入angular context执行环境，从而触发$digest,这也是为什么对第三方库需要手动 $apply，ng内置事件指令已经将$apply封装其中

$digest

作用：遍历 $watch 队列，进行dirty-checking,如有变化，DOM发生变化

最佳实践

  • 将控制器命名为[Name]Controller而不是[Name]Ctrl是一个最佳实践
  • 控制器应尽可能短小精悍，在控制器中建议不要操作dom，复杂的逻辑放入指令和服务中

Clone this wiki locally