2016-09-21 1 views
0

Я использую ui-router для моей маршрутизации в Angular App. Моя страница 3 UI-представления в одном HTML, как этогоКак заменить одиночный ui-view, если у меня есть несколько ui-представлений в одном html

<html> 
<div ui-view="header"></div> 
<div ui-view="content"></div> 
<div ui-view="footer"></div> 
</html> 

OnClick что-то в заголовке, я маршрутизировать щий ракурс = «содержание» на второй Ui ракурс = «Content2». Но нижний колонтитул & останется. Как достичь этого?

ответ

2

Это может быть разрешено с вложенными состояниями.

$stateProvider 
    .state('parent', { 
     abstract: true, 
     views: { 
      header: { 
       templateUrl: 'header.html' 
      }, 
      footer: { 
       templateUrl: 'footer.html' 
      }, 
      content: { 
       template: '<div ui-view></div>' 
      } 
     } 
    }) 
    .state('parent.child1', { 
     url: '/child1', 
     templateUrl: 'child1.html' 
    }) 
    .state('parent.child2', { 
     url: '/child2', 
     templateUrl: 'child2.html' 
    }); 
0

вы также можете попробовать что-то подобное. это сработало для меня.

.state('app', { 
    abstract: true, 
    url: "/", 
    templateUrl: 'partials/app.html', 
    controller: 'MainCtrl' 
}) 

.state('app.content1', { 
    url: "", 
    views: { 
     'header': { 
      templateUrl: "partials/header.html", 
     }, 
     'footer': { 
      templateUrl: 'partials/footer.html', 
     }, 
     'content': { 
      templateUrl: "partials/content1.html", 
      controller: 'FirstContentCtrl', 
     } 
    } 
}) 

.state('app.content2', { 
    url: "", 
    views: { 
     'header': { 
      templateUrl: "partials/header.html", 
     }, 
     'footer': { 
      templateUrl: 'partials/footer.html', 
     }, 
     'content': { 
      templateUrl: "partials/content2.html", 
      controller: 'SecondContentCtrl', 
     } 
    } 
}) 
+0

Ур ответ будет работать хорошо для меня. Но проблема в том, что у меня несколько видов контента –

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