Блог

Главная - Вопросы по программированию - эта часть документации ion-nav-view не имеет для меня смысла

эта часть документации ion-nav-view не имеет для меня смысла

#ionic-framework #nav #ionic-view

#ionic-framework #навигационная система #ionic-view #навигация

Вопрос:

Пример кода для директивы ion-nav-view фактически не показывает ее использование. Поэтому я не уверен, как ее использовать. Вот ссылка на документацию:

http://ionicframework.com/docs/api/directive/ionNavView/

в заголовке USAGE говорится следующее:

при запуске приложения $stateProvider просмотрит URL-адрес, проверит, соответствует ли он состоянию индекса, а затем попытается загрузить home.html в .

Страницы загружаются по указанным URL-адресам. Один из простых способов создания шаблонов в Angular — поместить их непосредственно в ваш HTML-файл и использовать синтаксис. Итак, вот один из способов поместить home.html в наше приложение:

 <script id="home" type="text/ng-template">

  <!-- The title of the ion-view will be shown on the navbar -->
  <ion-view view-title="Home">
    <ion-content ng-controller="HomeCtrl">
      <!-- The content of the page -->
      <a href="#/music">Go to music page!</a>
    </ion-content>
  </ion-view>

</script>

Это полезно сделать, потому что шаблон будет кэшироваться для очень быстрой
загрузки, вместо того, чтобы извлекать их из сети.

Должен ли я вложить все это в директиву ion-nav-view? Еще одна причина моего замешательства заключается в том, что в одном из шаблонов ionic, предоставляемых фреймворком, я видел, как ion-nav-view открывался и закрывался, и между ними ничего не было (приведенный ниже код скопирован и вставлен непосредственно из одного из шаблонов Ionic) : 

  <body ng-app="myApp">

    <!--
          The nav bar that will be updated as we navigate between views.
        -->
        <ion-nav-bar class="bar-stable">
          <ion-nav-back-button>
          </ion-nav-back-button>
        </ion-nav-bar>
        <!--
          The views will be rendered in the <ion-nav-view> directive below
          Templates are in the /templates folder (but you could also
          have templates inline in this html file if you'd like).
        -->

        <ion-nav-view></ion-nav-view>

    </body>

Ответ №1:

Это <ion-nav-view> ведет себя как заполнитель. Туда попадают другие ваши HTML-файлы, которые вы создаете в папке templates. Так, например, у вас есть «employees.html «в вашей папке «Шаблоны». Итак, разметка «employees.html » будет выглядеть примерно так: 

 <ion-view view-title="Employees">
<ion-content>
  <ion-list>
    <ion-item ng-repeat="item in items">
      Hello, {{item}}
    </ion-item>
  </ion-list>
</ion-content>
</ion-view>

приведенный выше полный html, который будет находиться в «employees.html «. По сути, это HTML-код, который будет помещен внутри <ion-nav-view> тегов.

Надеюсь, это поможет.

Комментарии:

1. Итак, я использую ion-nav-view, как показано в коде шаблона? То есть я помещаю туда пустую директиву и позволяю angular делать все остальное?

2. Вот именно. Это происходит через конфигурацию маршрутизатора. смотрите, у вас есть что-то вроде этого ‘<ion-nav-view name=»menuContent»> </ion-nav-view>’, а затем в вашем app.js в конфигурации вашего состояния вы определяете его следующим образом .state(‘app.homepage’, { cache: false, url: ‘/домашняя страница’, views: { ‘menuContent’: { templateUrl: ‘templates/homepage.html ‘, контроллер: ‘HomepageCtrl’ } } })

3. Понял. Спасибо