当前位置: 动力学知识库 > 问答 > 编程问答 >

javascript - Offseting the content in Angular

问题描述:

Is there a way to have the offcanvas offset my content without actually putting the entirety of my content inside it?

What I mean is, in order of the offcanvas to offset the main content this has to be inside the offcanvas inner-wrap div, however, with angular, this could be difficult to implement.

I'd rather not implement my IndexController inside the OffCanvasController and every other single piece of content.

Is there a way to get the Offcanvas to push the main content to the right as it would normally do, without the need to include said content inside the offcanvas?

I currently have an index.html, a header.html and an offcanvas.html, as follows:

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>

And finally, 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 -->

The offcanvas.html is called in the first line of the header.html via a ng-include and the header.html itself is also called with a ng-include as an attribute of the nav element (which is in the index.html on the server side).

It all works wonderfully, except that, in order for the offcanvas to push the content to the right, I would need to include all the content inside this. I'd rather not do that, is there any other way?

分享给朋友:
您可能感兴趣的文章:
随机阅读: