AngularJS 控制器的生命周期是什么? [英] What is the lifecycle of an AngularJS Controller?

问题描述

谁能解释一下 AngularJS 控制器的生命周期是什么?

Can someone please clarify what the lifecycle of an AngularJS controller is?

• 控制器是单例还是按需创建/销毁?
• 如果是后者，是什么触发了控制器的创建/销毁?

考虑以下示例:

var demoApp = angular.module('demo')
  .config(function($routeProvider, $locationProvider) {
    $routeProvider
      .when('/home', {templateUrl: '/home.html', controller: 'HomeCtrl'})
      .when('/users',{templateUrl: '/users.html', controller: 'UsersCtrl'})
      .when('/users/:userId', {templateUrl: '/userEditor.html', controller: 'UserEditorCtrl'});
  });

demoApp.controller('UserEditorCtrl', function($scope, $routeParams, UserResource) {
  $scope.user = UserResource.get({id: $routeParams.userId});
});

例如:

在上面的例子中，当我导航到 /users/1 时，用户 1 被加载，并设置为 $scope.

In the above example, when I navigate to /users/1,user 1 is loaded, and set to the $scope.

然后，当我导航到 /users/2 时，会加载用户 2.是否重用了 UserEditorCtrl 的同一个实例，还是创建了一个新实例?

Then, when I navigate to /users/2, user 2 is loaded. Is the same instance of UserEditorCtrl reused, or is a new instance created?

• 如果是新实例，是什么触发了第一个实例的销毁?
• 如果它被重复使用，它是如何工作的?(即，加载数据的方法似乎在创建控制器时运行)

推荐答案

嗯，实际上问题是 ngView 控制器的生命周期是什么.

Well, actually the question is what is the life cycle for a ngView controller.

控制器不是单例.任何人都可以创建一个新的控制器，并且它们永远不会被自动销毁.事实是，它通常绑定到其底层范围的生命周期.控制器不会在其作用域被销毁时自动销毁.然而，在破坏了底层作用域之后，它的控制器就没有用了(至少，按照设计，它应该是).

Controllers are not singletons. Anyone can create a new controller and they are never auto-destroyed. The fact is that it's generally bound to the life cycle of its underlying scope. The controller is not automatically destroyed whenever its scope is destroyed. However, after destroying an underlying scope, its controller is useless (at least, by design, it should be).

回答您的具体问题，ngView 指令(以及 ngController 指令)将始终 在每次导航发生时创建一个新的控制器和一个新的范围.而 最后一个作用域将被销毁 也是.

Answering your specific question, a ngView directive (as well for ngController directive) will always create a new controller and a new scope every time a navigation happens. And the last scope is going to be destroyed as well.

生命周期事件"非常简单.您的创建事件" 是控制器本身的构造.只需运行您的代码.要知道它何时变得无用(破坏事件")，请收听范围 $destroy 事件:

The life cycle "events" are quite simple. Your "creation event" is the construction of your controller itself. Just run your code. To know when it gets useless ("destruction event"), listen to scope $destroy event:

$scope.$on('$destroy', function iVeBeenDismissed() {
  // say goodbye to your controller here
  // release resources, cancel request...
})

对于 ngView，您可以通过作用域事件 $viewContentLoaded 了解内容何时加载:

For ngView specifically, you are able to know when the content gets loaded through the scope event $viewContentLoaded:

$scope.$on('$viewContentLoaded', function readyToTrick() {
  // say hello to your new content here
  // BUT NEVER TOUCHES THE DOM FROM A CONTROLLER
});

这是一个带有概念证明的 Plunker(打开您的控制台窗口).

Here is a Plunker with a concept proof (open your console window).

这篇关于AngularJS 控制器的生命周期是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！