AngularJS 纯 ng-controller 生命周期钩子
AngularJS pure ng-controller lifecycle hooks
假设一个纯 AngualrJS (1.6.x) 控制器使用 ng-controller
指令声明(与组件控制器相反)。
它有像 $onInit
或 $onDestroy
这样的生命周期钩子吗?
根据scope documentation (v1.6.10) there are not such hooks (using the ng-controller
方法中的范围生命周期部分。
scope 的生命周期是这样的:
- 创作
根作用域是由 $injector
在应用程序 bootstrap 期间创建的。在模板链接期间,一些指令会创建新的子作用域。
- 观察者注册
在模板链接期间,指令在作用域上注册监视。这些手表将用于将模型值传播到 DOM.
- 模型突变
为了正确观察突变,您应该只在 scope.$apply()
内进行突变。 AngularJS APIs 隐含地执行此操作,因此在控制器中进行同步工作时不需要额外的 $apply
调用,或者使用 $http
、$timeout
或 $interval
服务。
- 变异观察
在 $apply
结束时,AngularJS 在根作用域上执行 $digest
循环,然后传播到所有子作用域。在 $digest
周期中,所有 $watched
表达式或函数都会被检查模型突变,如果检测到突变,则会调用 $watch
侦听器。
- 范围破坏
当不再需要子作用域时,子作用域创建者有责任通过 scope.$destroy()
API 销毁它们。这将停止将 $digest
调用传播到子作用域,并允许垃圾收集器回收子作用域模型使用的内存。
当然,您也可以随时使用 $rootScope.Scope#$on
来监听变化。
示例:
$scope.$on('my-custom-event', function () {
// some code to execute when my-custom-event is fired
});
$scope.$on('$destroy', function () {
// some code to execute when the scope is destroyed
});
假设一个纯 AngualrJS (1.6.x) 控制器使用 ng-controller
指令声明(与组件控制器相反)。
它有像 $onInit
或 $onDestroy
这样的生命周期钩子吗?
根据scope documentation (v1.6.10) there are not such hooks (using the ng-controller
方法中的范围生命周期部分。
scope 的生命周期是这样的:
- 创作
根作用域是由 $injector
在应用程序 bootstrap 期间创建的。在模板链接期间,一些指令会创建新的子作用域。
- 观察者注册
在模板链接期间,指令在作用域上注册监视。这些手表将用于将模型值传播到 DOM.
- 模型突变
为了正确观察突变,您应该只在 scope.$apply()
内进行突变。 AngularJS APIs 隐含地执行此操作,因此在控制器中进行同步工作时不需要额外的 $apply
调用,或者使用 $http
、$timeout
或 $interval
服务。
- 变异观察
在 $apply
结束时,AngularJS 在根作用域上执行 $digest
循环,然后传播到所有子作用域。在 $digest
周期中,所有 $watched
表达式或函数都会被检查模型突变,如果检测到突变,则会调用 $watch
侦听器。
- 范围破坏
当不再需要子作用域时,子作用域创建者有责任通过 scope.$destroy()
API 销毁它们。这将停止将 $digest
调用传播到子作用域,并允许垃圾收集器回收子作用域模型使用的内存。
当然,您也可以随时使用 $rootScope.Scope#$on
来监听变化。
示例:
$scope.$on('my-custom-event', function () {
// some code to execute when my-custom-event is fired
});
$scope.$on('$destroy', function () {
// some code to execute when the scope is destroyed
});