AngularJS 中 Controller 的生命周期-JavaScript中文网-JavaScript教程资源分享门户

在 AngularJS 中，Controller 是一个很重要的概念，它负责管理视图和数据之间的交互。Controller 的生命周期是指从创建到销毁的整个过程，它的状态会随着整个应用的运行而不断变化。本文将详细介绍 AngularJS 中 Controller 的生命周期，帮助开发者更好地理解和应用。

创建阶段

Controller 的创建是由 $controllerProvider 负责的，它通过 $injector 实例化 Controller，并将其注册到 AngularJS 的依赖注入系统中。在 Controller 的创建阶段，AngularJS 会执行以下操作：

执行 Controller 函数，并将 $scope 和其他依赖注入到函数中。
如果 Controller 中定义了 $onInit 函数，则会在这个阶段被调用。
如果 Controller 中定义了 $scope.$on('$destroy') 函数，则会在 Controller 销毁时被调用。

下面是一个示例代码：

angular.module('myApp').controller('MyController', function($scope) {
  $scope.name = 'John Doe';

  this.$onInit = function() {
    console.log('Controller initialized');
  };

  $scope.$on('$destroy', function() {
    console.log('Controller destroyed');
  });
});

运行阶段

Controller 的运行阶段是在创建阶段之后，当 AngularJS 启动应用时执行的。在运行阶段，AngularJS 会执行以下操作：

执行 Controller 中的函数，包括 $watch、$digest、$apply 等等。
如果 Controller 中定义了 $onChanges 函数，则会在 $digest 循环中检测到数据变化时被调用。
如果 Controller 中定义了 $onDestroy 函数，则会在 Controller 销毁时被调用。

下面是一个示例代码：

angular.module('myApp').component('myComponent', {
  bindings: {
    name: '<'
  },
  controller: function() {
    this.$onChanges = function(changesObj) {
      console.log('Data changed', changesObj);
    };

    this.$onDestroy = function() {
      console.log('Component destroyed');
    };
  },
  template: '<div>Hello, {{$ctrl.name}}!</div>'
});

销毁阶段

Controller 的销毁阶段是在应用退出或者调用 $destroy 函数时执行的。在销毁阶段，AngularJS 会执行以下操作：

执行 Controller 中的 $scope.$destroy 函数。
如果 Controller 中定义了 $onDestroy 函数，则会在这个阶段被调用。

下面是一个示例代码：

angular.module('myApp').controller('MyController', function($scope) {
  $scope.$on('$destroy', function() {
    console.log('Controller destroyed');
  });
});

angular.module('myApp').directive('myDirective', function() {
  return {
    scope: true,
    controller: function($scope) {
      $scope.$on('$destroy', function() {
        console.log('Directive destroyed');
      });
    }
  };
});

总结

Controller 的生命周期是 AngularJS 中的一个重要概念，它负责管理视图和数据之间的交互。在创建、运行和销毁阶段，AngularJS 会执行不同的操作，开发者需要了解这些操作的顺序和时机，才能更好地应用 Controller。本文详细介绍了 AngularJS 中 Controller 的生命周期，并提供了示例代码，希望能够帮助开发者更好地理解和应用。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/658cd6ebeb4cecbf2d2a3321