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事件並取消超時。