如何动态使用angularjs ng-outlet
Posted
技术标签:
【中文标题】如何动态使用angularjs ng-outlet【英文标题】：How to use angularjs ng-outlet dynamically 【发布时间】：2015-08-22 17:49:18 【问题描述】：从几天开始，我正在开发 angularjs 应用程序。经过 2 天的头脑风暴，我现在知道如何使用 angularjs 的新路由器+组件+ng-outlet 的东西。
现在，在幸福片刻之后，又出现了一个奇怪的问题。那就是-在我的应用程序中，主要有两种页面。
登陆页面（我只需要 1 个 ng-outlet） 其他页面（我需要 3 ng-outlet。就像顶部导航栏、侧边栏和主要内容区域。见下面的截图）所以我想要的是，当用户从登录页面移动到其他页面时，我如何在 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>
【问题讨论】：
你的主要组件本质上是根组件吗？ 【参考方案1】：我遇到了同样的问题，我的解决方法是创建一个 void 组件，带有一个空控制器和这个 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'
]);
希望对你有帮助， 雷纳托
【讨论】：
您的解决方案看起来不错。但是我正在使用 Angular Material design(material.angularjs.org/latest/#) 并且每当我尝试实现您的技术材料设计 CSS 时都无法正常工作。上面我已经包含了我的 index.html 代码。为了实现您的技术，所有材料设计代码都应该在“ng-outlet”内，如果我这样做，所有材料设计的 CSS 都不起作用。 是的，我在使用 angular-material 时遇到了同样的问题。是的，我将该内容移到了组件的模板中。然而，即使您可以在路由定义中使用 null 或 undefined 来指定其可见性。你最终会得到 ng-outlet “隐藏”，所以问题仍然存在。我从你的代码中看到你正在实现一个 md-sidenav，考虑到 sidenav 它本身是一个组件，所以拥有它是有意义的，将 md-sidnav 移动到组件模板。 根据 Pete Bacon 的说法，这在当前的 ngComponentRouter 中不可用。以上是关于如何动态使用angularjs ng-outlet的主要内容，如果未能解决你的问题，请参考以下文章
AngularJS + JQuery：如何在 angularjs 中获取动态内容
如何使用 angularjs 处理具有动态过滤添加的高级搜索？