Angular/Foundation — ng-view внутри off-canvas-wrap

У меня, кажется, основная проблема. Код довольно прост:

<body ng-app="myApp">

  <div class="off-canvas-wrap" data-offcanvas>
    <div class="inner-wrap">
      <!-- navigation -->
      <nav class="tab-bar">
        <section class="left-small">
          <a class="left-off-canvas-toggle menu-icon" href="#"><span></span></a>
        </section>
        <section class="middle tab-bar-section">
          <h1 class="title">My App</h1>
        </section>
      </nav>

      <!-- left-hand menu -->
      <aside class="left-off-canvas-menu">
        <ul class="off-canvas-list">
          <li><label>Foundation</label></li>
          <li><a href="#">One</a></li>
          <li><a href="#">Two</a></li>
          <li><a href="#">Three</a></li>
          <li><a href="#">Four</a></li>
          <li><a href="#">Five</a></li>
        </ul>
      </aside>

      <!-- primary content -->
      <div ng-view></div>

      <a class="exit-off-canvas"></a>
    </div>
  <div>

</body>

Если я использую ng-view с содержимым в отдельном файле, который загружается, он исчезает при взаимодействии. Изначально он есть, но исчезает, когда я щелкаю значок меню (Скриншот 1). При обновлении содержимое возвращается, но при дальнейшем взаимодействии с меню вне холста оно снова исчезает.

Если я удалю элемент ng-view и заменю его статическим содержимым, все будет работать нормально (Скриншот 2).

Скриншот 1

Скриншот 1

Скриншот 2

Скриншот 2

Что я здесь делаю неправильно?

  • Угловой 1.4.9
  • Фундамент 5.5.3

angularjs zurb-foundation zurb-foundation-5 ng-view
person el n00b    schedule 04.02.2016    source источник
comment
Я предполагаю, что когда вы щелкаете значок меню, маршрут меняется, поэтому загруженный вид для этого маршрута также меняется.   -  person mariocatch    schedule 04.02.2016
comment
Мне придется возиться и посмотреть, смогу ли я предотвратить навигацию по любому из этих кликов.   -  person el n00b    schedule 04.02.2016
comment
Вот что может помочь: stackoverflow.com/questions/12422611/   -  person mariocatch    schedule 04.02.2016

Ответы (1)


arrow_upward
0
arrow_downward

Я изменил одну строку, чтобы заставить это работать:

Эта строка:

<a class="left-off-canvas-toggle menu-icon" href="#"><span></span></a>

Сейчас:

<span class="left-off-canvas-toggle menu-icon"><span></span></span>

Я подумывал использовать href="javascript:", но это было противно. Тем не менее, это работает как шарм. Просто обратите внимание, что внутренние элементы необходимы для того, чтобы фактическая иконка отображалась в Foundation 5. Вот почему там есть дополнительные теги span.

На мгновение это не сработало из-за опечатки в моей конфигурации маршрутизации. Я использовал tempalte вместо template.

(лицевая ладонь)

person el n00b    schedule 04.02.2016