偏移Angular中的内容

Question

有没有办法让offcanas偏移我的内容而不实际将整个内容放入其中？

我的意思是，按照离线扫描的顺序来偏移主要内容，这必须在offcanvas内包装div中，但是，对于角度，这可能很难实现。

我宁愿不在OffCanvasController和其他所有内容中实现我的IndexController。

有没有办法让Offcanvas像往常一样将主要内容推到右边，而不需要在offcanvas中包含所述内容？

我目前有一个index.html，一个header.html和一个offcanvas.html，如下所示：

header.html中：

<div data-ng-include="'/public/system/views/offcanvas.html'"></div> <!-- This is where the offcanvas is included, before the main navigation -->
<div class="page-header" data-ng-controller="HeaderController">
    <div class="desktop">
        <ul class="title-area">
            <li class="name">
                <h1><a ui-sref="home" mean-token="'site-title'">SOL::S</a></h1>
        </li>
    </ul>

        <section class="top-bar-section">
            <ul class="left">
                <li data-ng-repeat="item in menus.main" ui-route="/{{item.link}}" ng-class="{active: $uiRoute}">
                    <a mean-token="item.link" ui-sref='{{item.link}}'>{{item.title}}</a>
            </li>
        </ul>

            <div class="account">
                <div class="text-edit">
                    <div data-ng-show="global.authenticated" mean-token-editable></div>
            </div>

                <ul class="right" data-ng-hide="global.authenticated">
                    <li><a ui-sref='auth.register'>Register</a></li>
                    <li><a ui-sref='auth.login'>Login</a></li>
            </ul>
                <ul class="right" data-ng-show="global.authenticated">
                    <li class="has-dropdown">
                        <a href="">{{global.user.name}}</a>
                        <ul class="dropdown">
                            <li><a href="/logout">Logout</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </section>
</div>
</div>

offcanvas.html

<div class="off-canvas-wrap mobile" data-ng-controller="offCanvasCtrl">
    <div class="inner-wrap">
        <nav class="tab-bar">
            <section class="left-small">
                <a class="left-off-canvas-toggle menu-icon" ><span></span></a>
        </section>

            <section class="middle tab-bar-section">
                <h1 class="title">SOL ::</h1>
        </section>
    </nav>
        <aside class="left-off-canvas-menu">
            <ul class="off-canvas-list">
                <li><a href="#">Left Sidebar</a></li>
                <li><a href="#">Left Sidebar</a></li>
                <li><a href="#">Left Sidebar</a></li>
        </ul>
    </aside>

        <section class="main-section">
            <div class="small-12 columns">
                <h1>How to use</h1>
                <p>Just use the standard layout for an offcanvas page as documented in the <a href="http://foundation.zurb.com/docs/components/offcanvas.html">foundation docs</a></p>
                <p>As long as you include mm.foundation.offcanvas it should simply work</p>
        </div>
    </section>
        <a class="exit-off-canvas"></a>
</div>
</div>

最后，index.html

<div class="container content" data-ng-controller="IndexController"> <!-- Main container and IndexController -->
<section> <!-- Site tag section -->
    <div class="row"> <!-- Site tag row -->
        <div class="small-12 columns">
        <h1 mean-token="'home-default'">SOL :: Search</h1>
        </div>
    </div> <!-- End site tag row -->
</section> <!-- End site tag section -->

<section> <!-- Logo section -->
    <div class="row"> <!-- Logo row -->
        <div class="small-10 columns text-center logo-container small-offset-1"> <!-- Logo column -->
            <a ui-sref="about" title="SOL"><img ng-src="{{logo}}" alt="SOL Logo"></a>
    </div> <!-- End logo column -->
</div> <!-- End logo row -->
</section> <!-- End logo section -->

<section> <!-- Search input section -->
    <div class="row"> <!-- Search row -->
        <div class="small-8 columns small-offset-2"> <!-- Search column -->
            <form>
                <div class="row collapse"> <!-- Input group -->
                    <div class="large-9 columns">
                        <input type="text" placeholder="" class="form-control main-search-input">
                </div>
                    <div class="small-3 columns">
                        <a href="#" class="button postfix main-search-button">Search</a>
                </div>
            </div>
        </form>
    </div><!-- End input group -->
</div><!-- End search column -->
</div><!-- End search row -->
</section> <!-- End search input section -->
</div> <!-- End IndexController -->

通过ng-include在header.html的第一行调用offcanvas.html，并使用ng-include作为nav元素的属性（在索引中）调用header.html本身服务器端的.html）。

这一切都非常有效，除了为了让offcanvas将内容推向右边，我需要在其中包含所有内容。我宁愿不这样做，还有其他办法吗？