gpt4 book ai didi

javascript - 如何动态使用 angularjs ng-outlet

转载 作者:行者123 更新时间:2023-11-28 07:17:21 26 4
gpt4 key购买 nike

这几天我正在开发 angularjs 应用程序。经过两天的头脑 Storm ,现在我知道了如何使用 AngularJS 的新路由器+组件+ng-outlet 东西。

现在,在短暂的幸福之后,又出现了一个奇怪的问题。也就是说 - 在我的应用程序中主要有两种页面。

  • 着陆页(我只需要 1 个 ng-outlet)
  • 其他页面(我需要 3 个 ng-outlet。比如顶部导航栏、侧边栏和主要内容区域。请参见下面的屏幕截图)

enter image description here

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

任何线索,如何处理这种情况?

感谢和问候

  • 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>

最佳答案

我面临着同样的问题,我的解决方法是创建一个空组件,带有一个空 Controller 和这个 template: "<div style='display:hidden;'></div>"

因此,每当我想让一个组件“消失”时,我都会为其分配 void 组件,如下所示:

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

希望对你有帮助雷纳托

关于javascript - 如何动态使用 angularjs ng-outlet,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30706147/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com