AngularJS控制器的生命周期是什么?

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

有人能解释一下AngularJS控制器的生命周期吗?

Is a controller a singleton, or created / destroyed on demand?
控制器是单例的，还是按需创建/销毁的?
If the latter, what triggers the creation / destruction of the controller?
如果是后者，是什么触发了控制器的创建/销毁?

Consider the below example:

考虑下面的例子:

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});
});

eg:

例如:

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

在上面的示例中，当我导航到/users/1时，将加载user 1，并将其设置为$scope。

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

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

If it's a new instance, what triggers the destruction of the first instance?
如果是一个新实例，是什么触发了第一个实例的销毁?
If it's reused, how does this work? (ie., the method to load the data appears to run on creation of the controller)
如果它被重用，如何工作?(即。，加载数据的方法似乎在创建控制器时运行)

1 个解决方案

#1

215

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

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

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).

控制器不单身。任何人都可以创建一个新的控制器，而且不会自动销毁。事实上，它通常与它的底层范围的生命周期相关联。当控制器的范围被破坏时，控制器不会自动销毁。然而，在破坏了一个基本的范围之后，它的控制器是无用的(至少，通过设计，它应该是)。

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.

在回答您的特定问题时，每当导航发生时，ngView指令(以及ngController指令)总是会创建一个新的控制器和一个新的范围。最后一个作用域也会被破坏。

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:

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

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

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

对于ngView，您可以知道内容何时通过scope事件$viewContentLoaded:

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

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

这是一个概念验证柱塞(打开控制台窗口)。

#1

215