OnsenUI pushPage没有加载页面

时间:2015-01-25 21:33:58

标签: javascript angularjs onsen-ui

看起来我正在监督某事。我刚开始使用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后滑入City1.html。我做错了什么?

2 个答案:

答案 0 :(得分:4)

我认为主要问题是你在同一个字符串中使用“”两次,在这里:

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

所以City1.html在实际字符串之外。试试'':

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

除此之外,你应该关闭“ons-template”并将每个“ons-list-item”放在“ons-list”中。此外,City1.html中的“ons-navigator”不是必需的。 Check this

您可以阅读有关这些元素的更多信息here。希望它有所帮助!

答案 1 :(得分:1)

谢谢!我解决了这个问题:

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

放入Home视图的ons-template标签。