我是 ui-router 的新手，在使用延迟加载的嵌套 ui-view 时遇到了一些困难。我已经尝试了很多东西，虽然我想我已经接近了，但我不能完全让它工作，所以无论谁修复了下面共享的 plunker，都将获得正确答案。

Plunker

-首先，require.js 引导主应用程序，index.html 包含两个 ui View ，一个用于导航，一个用于主要内容部分。主要内容部分包含各种投资组合项目(PLNKR中的Test1)，这些项目被懒惰(带有Oclazyload)到主内容部分中。

-主应用程序模块在其配置方法中定义了各种状态，包括根据其 ID 和基于命名约定加载投资组合项目的状态。

-当 Test1 被点击时，它的主模块被延迟加载，这个模块定义了它自己的状态，并且 Test1 有它自己的 index.html 和它自己的嵌套 ui-view。值得注意的是，我还必须使用此模块的 run 方法来运行一个将 $state.go 包装在 $timeout 中的函数，以便在最初单击 Test1 时让模板内容出现在嵌套的 ui View 中。这是 hackish，无疑不是正确的方法，也可能是问题的根源，我们很快就会看到。我还尝试将 $state.go 放入服务中，但这并没有什么不同，因为我最终遇到了同样的问题。

-最后，这里是问题所在。如果在 Test1 中，单击主导航中的 Home，然后尝试再次单击 Test1，则之前出现在嵌套 ui-view 中的模板内容不会出现(很明显，因为模块的运行函数只运行一次)。通过手动单击重新加载状态的链接很容易使其重新出现，但显然这是不可取的。

TL/DR -- 主页 -> 点击 Test1 -> 工作! -> 点击 Home -> 点击 Test1 -> Breaks!

主要应用模块和状态:

(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']
              });
            }
          }
        }
      }
    });

});

})();

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

(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 block 是它第一次和任何其他连续时间工作的原因.

原因是 run block 在模块加载时只运行一次，模块只加载一次。

要修复此移动 $state.go 调用 testingCtrl 同时添加 $state 作为依赖注入(inject)

查看我的固定 plunker .

关于javascript - Angular UI-Router - 在状态更改时刷新延迟加载的嵌套 ui-view，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34257730/