我刚开始使用ui-router，对于懒加载的嵌套ui-view有些困难。我尝试了很多方法，虽然我认为我已经接近成功了，但还是无法正常工作。因此，谁能修复下面分享的plunker，谁就可以获得正确答案。
Plunker
首先，require.js引导主应用程序，index.html包含两个ui-view，一个用于导航，另一个用于主内容区域。主内容区域包含各种投资组合项目（在plnkr中为Test1），当选择其中一个时，它们将被懒加载（使用ocLazyLoad）到主内容区域中。
主应用程序模块在其config方法中定义了各种状态，包括根据命名约定加载投资组合项的状态。
主应用程序模块在其config方法中定义了各种状态，包括根据命名约定加载投资组合项的状态。
- 当点击Test1时，它的主模块会进行懒加载，并且该模块定义了自己的状态，而Test1则有自己的index.html和嵌套的ui-view。值得注意的是，我还必须使用该模块的run方法来运行一个函数，该函数将$state.go包装在$timeout中，以便在Test1初始点击时在嵌套的ui-view中显示模板内容。这是一种hackish的方式，毫无疑问不是正确的方法，也许是问题的根源，正如我们很快将看到的那样。我还尝试将$state.go放入服务中，但没有任何区别，因为最终遇到了相同的问题。
- 最后，这就是问题出现的地方。如果从Test1内部，您单击主导航中的Home，然后再次单击Test1，则先前出现在嵌套ui-view中的模板内容不会出现（显然，因为模块的run函数仅运行一次）。通过手动单击重新加载状态的链接可以轻松使其重新出现，但显然这并不理想。
TL/DR -- Home -> 单击Test1 -> 工作正常！ -> 单击Home -> 单击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']
});
}
}
}
}
});
});
})();
懒加载的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);
});
})();