2015-01-26 8 views
10

Mam wiele widoków jak tutaj: http://www.funnyant.com/angularjs-ui-router/Wymień UI-widok z załadowanej treści

I załadować je na mojej stronie jak to

<div data-ui-view="content"></div> --- 75% width 
<div data-ui-view="sidebar"></div> --- 25% width 

Teraz, gdy zawartość jest załadowany, chcę załadowana zawartość nie jest ładowana wewnątrz tych elementów div, ale zastępuje je. Czy to możliwe ? ponieważ jeśli nie zastąpią, to moja sytuacja nie będzie działać, a pasek boczny pokazuje poniżej treść.

Pomóżcie proszę

dzięki

+0

Nieużywany ui-router wcześniej, ale czy nie możesz dodać klas do tych elementów div, a następnie nadać styl css, aby uzyskać swój układ?

LT86

Odpowiedz

0

Nie jest to możliwe i byłoby niepożądane, gdyż zostawiają cię w stanie zmienić stany. Prostym obejściem byłoby dodanie stylów width/float bezpośrednio do elementów div ui-view.

Jeśli chcesz ją uruchomić, możesz utworzyć niestandardowe opakowanie dyrektywne, takie jak dostarczone rozwiązanie here.

+0

To prawda, że ​​możesz dodać swoje identyfikatory, klasy itp. Bezpośrednio do tagu zawierającego atrybut ui-view dla celów stylizacji. Ponieważ jednak część widoku jest w innej części, powoduje to podział między tożsamością komponentu (klasa lub identyfikator definiujący jego przestrzeń nazw w CSS) a jego treścią lub elementami potomnymi. Osobiście uważam to za dość denerwujące. Idea dyrektywy niestandardowej wydaje się dość hackowata. Zamierzamy dokonać aktualizacji do wersji 1.6, więc może "prawdziwe komponenty" rozwiązują ten problem? – suigeneris

2

Korzystanie z Bootstrap rows może to osiągnąć Twój cel?

<div class="row"> 
    <div class="col-md-9" ui-view="content"></div> 
    <div class="col-md-3" ui-view="sidebar"></div> 
</div> 
0

Spróbuj dodać żądane rozmiary do stylu pojemników.

<div data-ui-view="content" style="width: 75%;"></div> 
<div data-ui-view="sidebar" style="width: 25%;"></div>