AngularJS 移动 ui-视图中断渲染

Question

我正在使用 jhipster 框架开发一个 angularJS 站点。该框架提供了 AngularJS + Bootstrap + Spring 启动组合。我一直在尝试用 angular material 替换 bootstrap，但我在这样做时遇到了麻烦。

原始 index.html 设置：

<div ui-view="navbar" ng-cloak=""></div>
<div class="container">
    <div class="well" ui-view="content"></div>
</div>

导航栏和内容 ui-view 映射到一个视图：

$urlRouterProvider.otherwise('/');
$stateProvider.state('site', {
            'abstract': true,
            views: {
                'navbar@': {
                    templateUrl: 'scripts/components/navbar/navbar.html',
                    controller: 'NavbarController'
                }
            },
            resolve: {
                authorize: ['Auth',
                    function (Auth) {
                        return Auth.authorize();
                    }
                ],
                translatePartialLoader: ['$translate', '$translatePartialLoader', function ($translate, $translatePartialLoader) {
                    $translatePartialLoader.addPart('global');
                }]
            }
        });


$stateProvider
            .state('home', {
                parent: 'site',
                url: '/',
                data: {
                    authorities: []
                },
                views: {
                    'content@': {
                        templateUrl: 'scripts/app/main/main.html',
                        controller: 'MainController'
                    }
                },
                resolve: {
                    mainTranslatePartialLoader: ['$translate', '$translatePartialLoader', function ($translate,$translatePartialLoader) {
                        $translatePartialLoader.addPart('main');
                        return $translate.refresh();
                    }]
                }
            });

我想在我的导航栏视图中呈现我的内容，因为这就是 angular material 侧边导航组件的工作方式：http://codepen.io/marcysutton/pen/OPbpKm，这就是我的麻烦开始的地方。

如果我将内容 ui-view 移动到正确的导航栏部分，则不会呈现任何内容

新 navbar.html:

...
</md-sidenav>
<div layout="column" flex id="content">
    <md-content layout="column" flex class="md-padding">
        <div class="well" ui-view="content"></div>
    </md-content>
</div>
...

我是否需要更改 angular 代码中的某些内容以支持此行为？提前致谢！注意：原来的 index.html 有效，移动后失败。

Answer 1

我通过执行以下操作修复了它：

 views: {
     'content@site': {
     ...

AngularJS 移动 ui-视图中断渲染

AngularJS moving ui-view breaks rendering

javascript

angularjs

angular-ui-router

jhipster