如何動態使用angularjs ng-outlet

從幾天我正在處理angularjs應用程序。經過2天的腦力激盪後，我開始瞭解如何使用angularjs的新路由器+組件+ ng-outlet。如何動態使用angularjs ng-outlet

現在，幸福的時刻之後，又出現了一個奇怪的問題。那是 - 在我的應用程序中，主要有兩種頁面。

着陸頁（在這裏我只需要1納克出口）
其他網頁（我需要3 NG-插座。這就像頂部導航欄，側邊欄&主要內容的區域。見下面的截圖）

enter image description here

所以我想要什麼，當用戶從登錄頁面移動到其他頁面如何創建我的index.html文件動態3ng的出口。這樣，我可以填充我的頂部導航欄組件，側欄組件&的主要內容區域。

任何線索，如何處理這種情況？

感謝&問候

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>

來源

2015-06-08 mi6crazyheart

是你的主要成分主要由根組件？ – Winnemucca

我面臨同樣的問題，我的解決方法是創建一個無效成分，用空控制器和這個template: "<div style='display:hidden;'></div>"

所以，每當我想打一個組成部分「消失」，我爲它分配無效組件，像這樣：

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

希望它能幫助，雷納託

來源

2015-06-08 16:20:31 khalla

你的解決方案看起來不錯。但我使用Angular Material設計（https://material.angularjs.org/latest/#/）＆每當我嘗試實現您的技術材質設計時CSS無法正常工作。上面我已經包含了我的index.html代碼。爲了實現你的技術，所有的材料設計代碼都應該在「ng-outlet」中，如果我這樣做了，那麼所有CSS材質設計都不起作用。 – mi6crazyheart

是的，我在使用角度材料時遇到了同樣的問題。是的，我將該內容移至組件模板。但是，即使您可以在路徑定義中使用null或undefined來指定其可見性。你會最終與ng-outlet「隱藏」，所以問題依然存在。我通過你的代碼看到你正在實現一個md-sidenav，根據這個sidenav認爲它是它自己的一個組件，因此把md-sidnav移動到組件模板是有道理的。 – khalla

根據Pete Bacon，這在當前的ngComponentRouter中不可用。 – Winnemucca

如何動態使用angularjs ng-outlet

回答

相關問題