angularjs - Issue with Foundation off-canvas when using it with rails -
i'm writing web-app using rails 4 + foundation 5 , angularjs, goal here create off-canvas sidebar when load second ui-view(got index , main), thing off-canvas never worked when come index view work when reload page(f5): works fine whatever put on href or ui-sref here's code
.config([ "$stateprovider", "$urlrouterprovider", function($stateprovider, $urlrouterprovider){ $stateprovider .state('index', { url: '/index', templateurl: '/index.html', controller: 'indexctrl' }) .state('mainpage', { url: '/main', templateurl: '/main.html', controller: 'mainctrl' }) $urlrouterprovider.otherwise('index') }])<!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>a title</title> <%= stylesheet_link_tag "application" %> <%= javascript_include_tag "vendor/modernizr" %> <%= javascript_include_tag "application", 'data-turbolinks-track' => true %> <%= csrf_meta_tags %> </head> <body ng-app="ubcimanager"> <ui-view></ui-view> <script type="text/ng-template" id="/index.html"> <div class="row" id="contentwrapper"> <div class="small-12 columns"> <div class="large-12 columns show-for-large-only"> <br /><br /><br /><br /><br /><br /><br /> </div> <div > <div class='row'> <div class="small-12 small-centred columns" id="page-header"> <h3>very long , boring title</h3> </div> </div> <div class="row"> <div class="small-12 small-centred columns" id='viewwrapper'> <form ng-submit="connect()"> <div class="row"> <div class="small-12 columns" > <br /> <p>to informations device on network, please make sure snmp activted , configured before filling form.</p> </div> </div> <div class="row"> <div class="large-4 columns" > <label> adresse <input type="text" placeholder="adresse ip" ng-model="hwaddr" /> </label> </div> <div class="large-4 columns" > <label> community <input type="text" placeholder="community" ng-model="community" /> </label> </div> <div class="large-4 columns"> <label> password <div class="row collapse"> <div class="small-10 large-9 columns"> <input type="password" ng-model="password" /> </div> <div class="small-2 large-3 columns"> <input type="submit" value="go" class="button postfix"></input> </div> </label> </div> </div> </div> <!--<small class="error" id="errormsg">invalid entry</small> --> </from> </div> </div> </div> </div> </div> </script> <script type="text/ng-template" id="/main.html"> <div id="mainwrapper"> <nav class="top-bar foundation-bar" data-topbar=""> <ul class="title-area"> <li class="name"> <span class="has-tip" data-tooltop=""> <h1>{{devicetype}}</h1> </span> </li> </ul> <section class="top-bar-section"> <ul class="right"> <li><a target="_blank">log out</a></li> </ul> </section> </nav> <div class="off-canvas-wrap" data-offcanvas> <div class="inner-wrap"> <a class="left-off-canvas-toggle" >menu</a> <!-- off canvas menu --> <nav class="left-off-canvas-menu"> <ul class="off-canvas-list"> <li><label>foundation</label></li> <li><a href="#">the psychohistorians</a></li> <li><a href="#">the encyclopedists</a></li> <li><a href="#">the mayors</a></li> <li><a href="#">the traders</a></li> <li><a href="#">the merchant princes</a></li> </ul> </nav> <!-- main content goes here --> <div class="maincontent"> <p>set in year 0 f.e. ("foundation era"), psychohistorians opens on trantor, capital of 12,000-year-old galactic empire. though empire appears stable , powerful, decaying in ways parallel decline of western roman empire. hari seldon, mathematician , psychologist, has developed psychohistory, new field of science , psychology equates possibilities in large societies mathematics, allowing prediction of future events.</p> </div> <!-- close off-canvas menu --> <a class="exit-off-canvas"></a> </div> </div> </div> </script> </body> </html>
i solved issue using scope functions , force off-canvas events within, functions called via angular ng-click option in html , events documented in foundation 5 @ end of off-canvas page(i missed them first time...)
Comments
Post a Comment