Replace ui-view with the loaded content

问题:

I have multiple views like here : http://www.funnyant.com/angularjs-ui-router/

And I load them in my page like this

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

Now, when the content is loaded, I want the loaded content not load inside these ui-view divs, but to replace them. Is it possible ? because if they don't replace then in my situation the float won't work and the sidebar shows bellow the content.

Help please

thanks

回答1:

Using Bootstrap rows would this achieve your aim?

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

回答2:

This is not possible and would be undesirable as it would leave you unable to change states. A simple workaround would be to add the width/float styles directly to the ui-view divs.

If you are determined to make it work you could create a custom directive wrapper like the solution provided here.

回答3:

Try adding your desired sizes to the style of the containers.

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