Question

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

UPDATE TableB JOIN TableA ON TableA.t =    
TRIM(SUBSTRING_INDEX(TableB.t,'-',1))SET TableB.value= TableB.value * TableA.rate

当我快速从$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时（在15000毫秒之前），我仍然看到/child2控制器中定义的警报，这是正常行为吗？

Answer 1

这是正常行为吗？

是的，这是正常行为。只要另一个函数保留该引用，创建并赋予另一个函数（例如$timeout服务）的函数引用将持续。在$timeout服务的情况下，它将在超时期间保留该引用（在这种情况下为15秒）。

此外，如果子函数使用父函数的局部变量，那么这些局部变量将在子函数的生命周期内保留。这个过程被称为＆＃34;创建一个闭包＆＃34;。

有关详细信息，请参阅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的函数附加到它返回的promise中。客户端代码可以调用该函数来告诉$timeout服务中止超时并释放对函数的引用。

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

Angular中的控制器生命周期

1 个答案: