Angular 中的控制器生命周期答案

【问题标题】：Controller life-cycle in AngularAngular 中的控制器生命周期
【发布时间】：2016-11-07 05:26:04
【问题描述】：

我使用 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'
  })

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

【问题讨论】：

快速是什么意思？
@GauravSrivastava 我的意思是在 5 秒之前，即 child1 控制器中 $timeout 函数的第二个参数。
超时肯定会起作用。虽然有角度服务，但它是一个窗口事件。您需要清除范围销毁事件中的超时
这可能会起作用：-stackoverflow.com/questions/32314833/…
您必须手动取消所有已定义的行为：超时/监视/事件等。scope.$on('$destroy', ...) 就是为此而设计的。

标签： javascript angularjs angular-ui-router

【解决方案1】：

这是正常行为吗？

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

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

欲了解更多信息，请参阅MDN JavaScript Reference - Closures

$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 事件并取消超时。

【讨论】：