0

I am trying to use Angular-Foundation-http://pineconellc.github.io/angular-foundation/ but it does not seem to be working. The sample itself is what I am testing (after I tried it on my own app, and it failed there also.)

Here is the plunker - http://plnkr.co/edit/?p=preview

The problem is when you click the hamburger menu icon it does not display the menu. I am not sure even how to debug the problem to figure out what is wrong. I do know if i remove the mm.foundation service it will begin to work, but then it is only foundation, no more angular directives.

Thanks!

More information found in plunker:

HTML:

<div ng-controller="OffCanvasDemoCtrl">
    <div class="off-canvas-wrap">
        <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">OffCanvas</h1>
                </section>

                <section class="right-small">
                    <a class="right-off-canvas-toggle menu-icon" ><span></span></a>
                </section>

            </nav>

            <aside class="left-off-canvas-menu">
                <ul class="off-canvas-list">
                    <li><a href="#">Left Sidebar</a></li>
                </ul>
            </aside>
            <aside class="right-off-canvas-menu">
                <ul class="off-canvas-list">
                    <li><a href="#">Right 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>
</div>

Javascript:

angular.module('plunker', ['mm.foundation']);
angular.module('foundationDemoApp').controller('OffCanvasDemoCtrl', function ($scope) {

});
nycynik
  • 7,371
  • 8
  • 62
  • 87

0 Answers0