Angular UI路由器中的嵌套视图未加载内容

Question

我有一个通过browserify编译的Angular js应用程序。 除了嵌套状态视图之外，其他所有功能都可以通过状态提供程序来实现。

在我第一个包含的模板中：

<div class="carosel">
<div ui-view="ui-view" class="carosel_viewer"></div>
<div class="carosel_control">
    <ul>
       <li>Highlights</li>
       <li>Social</li>
       <li>Locations</li>
    </ul>
</div>
</div>

在状态路由器内部，我有：

app.config(function($stateProvider, $urlRouterProvider) {
    $stateProvider
        .state('home', {
            url: '',
            templateUrl: 'templates/home.html'
        })
        .state('home.social', {
            url: '/social',
            templateUrl: 'templates/home.first.html'
        });
    //$locationProvider.html5Mode(true);

})

我没有任何错误，但是内容没有显示在carosel_viewer内部。 我最初从标准的$ routeProvider和一个ng-include开始工作，所以看起来位置和路径是正确的。 从那以后，我决定希望将“ carosel”的每个阶段（是的，拼写不正确）映射到唯一的共享路径，以此类推。如果有人对此有更好的建议，我很乐意尽力而为也是。 我有点笨拙。

谢谢！

Answer 1

您走在正确的轨道上。 UI路由器最适合处理此类情况。

代码中的唯一问题是，当您想在某个命名块中打开某些视图时，必须显式指定该视图应附加到的块的名称。

您的代码应作如下修改：

<div ui-view="carosel_viewer" class="carosel_viewer"></div>

views: {
  'carosel_viewer': {
   'url': 'home',
   'templateUrl: 'templates/home.html',

  },
}

虽然没有经过上述测试，但是类似的东西应该可以为您工作。 您可以在这里阅读更多信息： https : //github.com/angular-ui/ui-router/wiki/Multiple-Named-Views

希望能帮助到你 ：）