Javascript 角度UI路由器-在状态更改时刷新延迟加载的嵌套UI视图

我刚开始使用ui路由器，在使用惰性加载的嵌套ui视图时遇到了一些困难。我已经尝试了很多方法，虽然我想我已经接近了，但我还是不能让它发挥作用，所以无论是谁修复了下面共享的plunker，都会得到正确的答案

-首先，require.js引导主应用程序，index.html包含两个ui视图，一个用于导航，一个用于主内容部分。主内容部分包含各种公文包项（plnkr中的Test1），当选择一个公文包项时，这些公文包项被延迟加载（使用ocLazyLoad）到主内容部分

-主应用程序模块在其配置方法中定义了各种状态，包括根据其ID和命名约定加载公文包项的状态

-单击Test1时，它的主模块是延迟加载的，该模块定义自己的状态，Test1有自己的index.html和自己的嵌套ui视图。值得注意的是，我还必须使用这个模块的run方法来运行一个包装$state.go in$timeout的函数，以便在最初单击Test1时，在嵌套的ui视图中显示模板内容。这是一种骇人听闻的做法，毫无疑问不是正确的方法，也许是问题的根源，我们很快就会看到。我还尝试将$state.go放入一个服务中，但没有起到任何作用，因为我最终遇到了相同的问题

-最后，这里是事情的转折点。如果从Test1内部，您在主导航中单击Home，然后再次尝试单击Test1，则之前出现在嵌套ui视图中的模板内容不会出现（显然，因为模块的run函数只运行一次）。通过手动单击重新加载状态的链接可以很容易地使其重新出现，但显然这是不可取的

TL/DR--主页->点击测试1->工作！->单击主页->单击测试1->中断

主应用程序模块和状态：

(function() {

  angular.module('myApp', [
  'ui.router',
  //'door3.css',
  'oc.lazyLoad'
])
.config(function($ocLazyLoadProvider, $stateProvider, $urlRouterProvider) {

  $urlRouterProvider.otherwise('/');

  $stateProvider
    .state('root', {
      url: '/',
      views: {
        'nav': {
          templateUrl: 'views/static/nav.html'
        },
        'content': {
          templateUrl: 'views/portfolio.html'
        }
      }
    })
    .state('root.home', {
      url: 'home',
      views: {
        'content@': {
          templateUrl: 'views/portfolio.html'
        }
      }
    })
    .state('root.about', {
      url: 'about',
      views: {
        'content@': {
          templateUrl: 'views/about.html'
        }
      }
    })
    .state('root.portfolio', {
      url: ':id',
      views: {
        'content@': {
          // css: function($stateParams) {
          //   return '/portfolio/' + $stateParams.id + '/css/master.css';
          // },
          templateUrl: function($stateParams) {
            return 'portfolio/' + $stateParams.id + '/index.html';
          },
          resolve: {
            load: function($stateParams, $ocLazyLoad) {
              return $ocLazyLoad.load({
                files: ['portfolio/' + $stateParams.id + '/js/mainModule.js']
              });
            }
          }
        }
      }
    });

});

})();

(function() {

  angular.module('testingApp', [{
  files: [
    'portfolio/testing/controllers/testingCtrl.js'
  ]
}])
.config(function($stateProvider, $urlRouterProvider) {

  $urlRouterProvider.otherwise('/');

  $stateProvider
    .state('root.portfolio.testing', {
      url: '/',
      views: {
        'testingContent@root.portfolio': {
          templateUrl: 'portfolio/testing/views/testfile.html',
          controller: 'testingCtrl',
          controllerAs: 'test'
        }
      }
    })
})
.run(function($state, $timeout) {
  $timeout(function() {
    $state.go('root.portfolio.testing');
  }, 0);
});

})();

延迟加载的Test1主模块和状态：

(function() {

  angular.module('myApp', [
  'ui.router',
  //'door3.css',
  'oc.lazyLoad'
])
.config(function($ocLazyLoadProvider, $stateProvider, $urlRouterProvider) {

  $urlRouterProvider.otherwise('/');

  $stateProvider
    .state('root', {
      url: '/',
      views: {
        'nav': {
          templateUrl: 'views/static/nav.html'
        },
        'content': {
          templateUrl: 'views/portfolio.html'
        }
      }
    })
    .state('root.home', {
      url: 'home',
      views: {
        'content@': {
          templateUrl: 'views/portfolio.html'
        }
      }
    })
    .state('root.about', {
      url: 'about',
      views: {
        'content@': {
          templateUrl: 'views/about.html'
        }
      }
    })
    .state('root.portfolio', {
      url: ':id',
      views: {
        'content@': {
          // css: function($stateParams) {
          //   return '/portfolio/' + $stateParams.id + '/css/master.css';
          // },
          templateUrl: function($stateParams) {
            return 'portfolio/' + $stateParams.id + '/index.html';
          },
          resolve: {
            load: function($stateParams, $ocLazyLoad) {
              return $ocLazyLoad.load({
                files: ['portfolio/' + $stateParams.id + '/js/mainModule.js']
              });
            }
          }
        }
      }
    });

});

})();

(function() {

  angular.module('testingApp', [{
  files: [
    'portfolio/testing/controllers/testingCtrl.js'
  ]
}])
.config(function($stateProvider, $urlRouterProvider) {

  $urlRouterProvider.otherwise('/');

  $stateProvider
    .state('root.portfolio.testing', {
      url: '/',
      views: {
        'testingContent@root.portfolio': {
          templateUrl: 'portfolio/testing/views/testfile.html',
          controller: 'testingCtrl',
          controllerAs: 'test'
        }
      }
    })
})
.run(function($state, $timeout) {
  $timeout(function() {
    $state.go('root.portfolio.testing');
  }, 0);
});

})();

---

我不确定您试图实现什么，但将

$state.go

放入

run

块是它第一次和任何其他连续时间工作的原因

原因是

run

块在模块加载时仅运行一次，模块仅加载一次

要修复此移动

$state。在添加
$state
作为依赖项注入时，转到
调用
testingCtrl

请参阅我的修复。
这是它应该工作的，因此我将奖励它正确的答案。奇怪的是，在我的项目中，它仍然没有解决我的问题，这让我感到困惑。我记得，我尝试过您建议的修复的不同变体，它要么根本不起作用，要么遇到无限循环问题。显然还有别的地方出了问题，我会在弄清楚是什么问题后，如果我需要帮助，我会报告的。。。将更改为嵌套index.html文件中的是最终修复它的方法。感谢您的帮助。我在UI路由器附加程序中编写了未来状态，以管理延迟加载UI路由器状态的大多数陷阱：