OnsenUI pushPage не загружается страница

Question

Похоже, я что-то надзираю. Я только начал с OnsenUI. Я использовал стандартный вариант Tabbar и ничего не менял. У меня есть это в моей index.html

<ons-navigator title="Navigator" var="myNavigator"> 
     <ons-list-item modifier="chevron" class="item" ng-click="myNavigator.pushPage("City1.html", options);"> 
     <ons-row> 
      <ons-col> 
      <header> 
       <span class="item-title">City1</span> 
      </header> 
      </ons-col> 
     </ons-row>       
     </ons-list-item> </ons-navigator> 

и я тоже сделал новый шаблон:

<ons-template id="City1.html"> 
<ons-navigator> 
    <ons-page> 
    <ons-toolbar> 
     <div class="left"><ons-toolbar-button ng-click="doSomething()"><ons-icon icon="ion-compose"></ons-icon></ons-toolbar-button></div> 
     <div class="center">City1</div> 
     <div class="right"></div> 
    </ons-toolbar> 
    </ons-page> 
</ons-navigator> 

Я хочу скатываться в City1.html после нажатия на City1. Что я делаю не так?

Answer 1

Я думаю, что главная проблема заключается в том, что вы используете «» дважды в одной и той же строке, здесь:

ng-click="myNavigator.pushPage("City1.html", options);" 

Так City1.html находится за пределами фактической строки. Попробуйте с «»:

ng-click="myNavigator.pushPage('City1.html', options);" 

Кроме того, вы должны закрыть «ONS-шаблон» и поставить все «ONS-элемента списка» внутри «ONS-списка». Кроме того, «ons-navigator» в City1.html не нужен. Check this.

Подробнее об этих элементах вы можете узнать here. Надеюсь, поможет!

Answer 2

Спасибо! Я решил это с этим:

 <ons-list-item modifier="chevron" class="item" ng-click="myNavigator.pushPage('City1.html', { 
      animation: 'slide' 
     });"> 

И положить внутри тег-шаблона ons на Домашний вид.