如何惯用地手动销毁scope&在AngularJS中重新创建

How to idiomatically, manually destroy scope & re-create it in AngularJS?

本文关键字：AngularJS 新创建 创建 amp 何惯用 scope      更新时间：2023-09-26

我正试图使用UI路由器来管理应用程序中的状态更改。我认为在动态路由上更改状态会导致当前作用域被破坏，并且为模板创建的新作用域会被新内容重新插入，例如：

$stateProvider
  .state('foo', {
    url: '/:id'
    views: {
      'foo@': {
        templateUrl: 'partials/foo.html',
        controller: 'Foo',
        controllerAs: 'FooCtrl as foo'
      }
    }
  });

我以为上面的状态会破坏&每次用户导航到具有不同id的路线时，都会创建FooCtrl。因此，在每次路线更改时运行FooCtrl中的初始化函数，以使用来自控制器的服务的正确数据初始化当前视图。我一直在我的控制器中侦听$scope.$destroy函数在这些状态更改时运行，但它们没有被调用。

我好奇的是，创造&破坏控制器以获得我上面描述的功能？此外，在AngularJS中是否有更惯用的方法来实现同样的目的？

谢谢！

更新：为了在使用$state.go()时销毁和重新创建控制器，必须将{reload: true}选项作为第三个参数传递，如下所示。

$state.go('foo', {id: '1'}, {reload: true})

正如Radim所说，应该不需要调用{reload: true}来重新实例化控制器。目前，我正在监听$stateChangeStart，以确保状态实际上正在更新。看到它是，我正在听$scope.$on('$destroy')，它没有开火。所以出于某种原因，状态正在改变而控制器没有被破坏&重新实例化。

更新工作我犯的错误是，在我最深的嵌套视图中，我使用了一条绝对路径。这似乎使控制器从一个状态持续到另一个状态。当我将嵌套视图设置为相对视图时，它们将被销毁，并在状态更改时重新创建，如Radim所述。

有一个正在工作的plunker。默认情况下，UI路由器正在执行您所期望的操作。它在每次更改状态时都重新实例化控制器，即即使只有一个参数（id）更改

我只是稍微调整了一下上面的状态定义：

  // instead of this
  .state('/:id', {
      views: {
        'foo@': {
          templateUrl: 'partials/foo.html',
          controller: 'Foo',
          controllerAs: 'FooCtrl as foo'
        }
      }
    })
  // wee need this
  .state('myState', {
      url: '/:id',
      views: {
        'foo@': {
          templateUrl: 'partials/foo.html',
          controller: 'FooCtrl',
          controllerAs: 'foo'
        }
      }
    })

每当我们导航到具有不同id的状态'MyState'时，该FooCtrl都会登录到控制台

// register controller
.controller('FooCtrl', FooCtrl)
// this function will be our controller, called any time new id is passed
function FooCtrl($scope, $stateParams) {
    console.log('init with id: ' + $stateParams.Id + ', state params:')
    console.log($stateParams)
    var foo = {};
    foo.$stateParams = $stateParams
    return foo;
};
FooCtrl.$inject = ['$scope', '$stateParams'];

点击此处查看操作

相关文章：