Foundation off-canvas 与 rails 一起使用时出现问题

Question

我正在使用 rails 4 + Foundation 5 和 angularjs 编写 Web 应用程序，我的目标是在加载第二个时创建一个关闭 canvas 侧边栏ui-view(got index and main)，问题是 off-canvas 在我来自索引视图时从未工作过，但在我重新加载页面 (F5) 时工作：它工作正常我放在 href 甚至 ui-sref 上的任何东西这是代码

 .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 and 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 get informations about any device on your network, please make sure SNMP is activted and configured before filling this 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 the year 0 F.E. ("Foundation Era"), The Psychohistorians opens on Trantor, the capital of the 12,000-year-old Galactic Empire. Though the empire appears stable and powerful, it is slowly decaying in ways that parallel the decline of the Western Roman Empire. Hari Seldon, a mathematician and psychologist, has developed psychohistory, a new field of science and psychology that equates all possibilities in large societies to mathematics, allowing for the prediction of future events.</p>
               </div>
            <!-- close the off-canvas menu -->
            <a class="exit-off-canvas"></a>

            </div>
          </div>
        </div>
    </script>
  </body>
</html>

Answer 1

我通过使用作用域函数解决了这个问题，并在其中强制执行 off-canvas 事件，通过 html 中的 angular ng-click 选项调用的函数和事件在 off-canvas 页面末尾的基础 5 中有记录（我第一次错过了它们...）

Foundation off-canvas 与 rails 一起使用时出现问题

Issue with Foundation off-canvas when using it with rails

ruby-on-rails

angularjs

zurb-foundation

zurb-foundation-5