Как использовать угловой выход ng-outlet динамически

С пару дней я работаю над приложением angularjs. Через 2 дня мозгового штурма теперь я узнал, как использовать новый маршрутизатор + компоненты + angryjs.Как использовать угловой выход ng-outlet динамически

Теперь, после минуты счастья, возникла еще одна странная проблема. То есть - в моем приложении в основном есть 2 вида страниц.

целевой страницы (где мне нужно только 1 нг-розетка)
Другие страницы (где мне нужно 3 нг-выход. Это как верхней панели навигации, боковой панели & основного содержимого см. Скриншот ниже)

enter image description here

Так что я хочу, когда пользователь будет переходить от целевой страницы на другую страницу, как я создавать динамически 3 нг-отдушину в моем файле index.html. Таким образом, я могу заполнить компонент верхней панели навигации, компонент боковой панели &.

Любая подсказка, как справиться с такими ситуациями?

Благодаря & уважением

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-выход, поэтому проблема остается. Я вижу по вашему коду, что вы реализуете md-sidenav, подумайте с точки зрения того, что sidenav - это сам компонент, поэтому имеет смысл иметь его как таковое, перемещая md-sidnav в шаблон компонента. – khalla

согласно Pete Bacon, это не доступно в текущем ngComponentRouter. – Winnemucca

Как использовать угловой выход ng-outlet динамически

ответ

Смежные вопросы