Проблема с Foundation вне холста при использовании его с рельсами

Question

Проблема с Foundation вне холста при использовании его с рельсами

0

Я пишу веб-приложение, использующее рельсы 4 + Foundation 5 и angularjs, моя цель здесь - создать боковую панель вне холста, когда я загружаю свой второй ui-view (полученный индекс и основной), дело в том, 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>

Oussama Hammami 30 сен. 2015, в 16:41

Источник

Теги:

angularjs

ruby-on-rails

zurb-foundation

zurb-foundation-5

1 ответ

Ещё вопросы

Oussama Hammami · Accepted Answer · 2015-10-11T17-58-00.000Z

Я решил эту проблему, используя функции области видимости и принудительно внеконтактные события внутри, функции, которые вызываются с помощью параметра углового ng-click в html, а события задокументированы в фундаменте 5 в конце страницы с холстом (я пропустил их в первый раз...)