Question

从几天开始，我正在开发angularjs app。经过2天的脑力激荡，我现在知道如何使用angularjs的新路由器+组件+ ng-outlet的东西。

现在，幸福的一刻之后又出现了一个奇怪的问题。那是 - 在我的应用程序中主要有2种页面。

着陆页（我只需要1 ng插座）
其他页面（我需要3 ng-outlet。它就像顶部导航栏，侧栏和主要内容区。见下面的截图）

enter image description here

所以我想要的是，当用户从登陆页面移动到其他页面时，我如何在index.html文件中动态创建3 ng-outlet。所以，我可以填充我的顶部导航栏组件，侧栏组件和主要内容区域。

任何线索，如何处理这种情况？

谢谢＆amp;问候

index.html代码

<body layout="column" ng-controller="AppCtrl">    
    <div ng-outlet="navigation" id="navigation">
    </div>


    <div layout="row" flex>
        <md-sidenav layout="column" class="md-sidenav-left md-whiteframe-z2" md-component-id="left" md-is-locked-open="$mdMedia('gt-sm')">
            <div ng-outlet="sidebar">
            </div>  
        </md-sidenav>

        <div layout="column" flex id="content">
            <md-content layout="column" flex class="md-padding">
                <div ng-outlet="main">
                </div>
            </md-content>
        </div>
    </div>

    <script src="bower_components/angular/angular.min.js"></script>
    <script src="bower_components/angular-animate/angular-animate.min.js"></script>
    <script src="bower_components/angular-aria/angular-aria.min.js"></script>

    <script src="bower_components/angular-material/angular-material.min.js"></script>
    <script type="text/javascript" src="assets/js/router.es5.js"></script>
    <script type="text/javascript" src="assets/js/app.js"></script>
</body>

Answer 1

我遇到了同样的问题，我的解决方法是使用空控制器和template: "<div style='display:hidden;'></div>"

创建一个void组件

所以，每当我想制作一个组件时，＃34;就会消失。我为它分配了void组件，如下所示：

function appController($router) {
    $router.config([
        { path: '/', redirectTo: '/splash' },
        { path: '/splash', components: { left: 'void', main: 'splash' } },
        { path: '/left', components: { main: 'splash', left: 'left' } }
    ]);
}

希望它有所帮助，雷纳托

如何动态使用angularjs ng-outlet

1 个答案: