Angular中的控制器生命周期

Question

我使用ui-router定义了我的应用程序状态：

$stateProvider
  .state('app', {
    abstract: true,
    views: {
      'nav@': {
        templateUrl: 'app/navbar.html',
        controller: 'NavbarController',
        controllerAs: 'vm'
      },
      'main@': {
        template: '<div ui-view></div>'
      }
    }
  })
  .state('child1', {
    url: '/child1',
    parent: 'app',
    templateUrl: 'app/child1.html',
    controller: function($timeout) {
      $timeout(function() {
        alert('from child_1');
      }, 15000)
    },
    controllerAs: 'vm'
  })
  .state('child2', {
    url: '/child2',
    parent: 'app',
    templateUrl: 'app/child2.html',
    controller: 'ctrl_2',
    controllerAs: 'vm'
  })

当我快速地（在15000毫秒之前）从/child1转到/child2 ，仍然看到child1控制器中定义的警报，这是正常现象吗？

Answer 1

这是正常现象吗？

是的，这是正常现象。 只要其他函数保留了该引用，则创建并提供给另一个函数（例如$timeout服务）的函数引用将持续存在。 对于$timeout服务，它将在超时时间内（在本例中为15秒）保留该引用。

另外，如果子函数使用父函数的局部变量，则这些局部变量将在子函数的生命周期内保留。 该过程称为“创建关闭”。

有关更多信息，请参见MDN JavaScript参考-闭包

需要告知$timeout服务取消超时并删除引用，否则它将持续超过控制器的寿命。

controller: function($timeout, $scope) {
  var promise = $timeout(function() {
    alert('from child_1');
  }, 15000);
  $scope.$on("$destroy", function() {
    promise.cancel();
  });
},

在上面的示例中， $timeout服务将一个名为cancel的函数附加到它返回的承诺中。 客户端代码可以调用该函数以告知$timeout服务中止超时并释放对该函数的引用。

当ui-router从child1状态切换到另一个状态时，它将破坏控制器的范围。 控制器应侦听$destroy事件并取消超时。