1

onsen-uiのテンプレート(page2.html)のコードの下に

を加えたのですがボタンを押すとそれまでに記載されていた違うボタンなどが崩れてしまいます
なぜでしょうか?

<ons-toolbar>
    <div class="left">
        <ons-toolbar-button ng-click="app.slidingMenu.toggleMenu()"><ons-icon icon="bars"></ons-icon></ons-toolbar-button>
    </div>
    <div class="center">Page 2</div>
</ons-toolbar>

<div style="text-align: center">
    <h1>Page 2</h1>
    <ons-button ng-click="app.slidingMenu.toggleMenu()">Toggle Menu</ons-button>
</div>
<a href="page2.html"><input type="button" width="30px" height="15px"></a>


訂正です

<ons-page>
<ons-toolbar>
    <div class="left">
        <ons-toolbar-button ng-click="app.slidingMenu.toggleMenu()"><ons-icon icon="bars"></ons-icon></ons-toolbar-button>
    </div>
    <div class="center">Page 2</div>
</ons-toolbar>

<div style="text-align: center">
    <h1>Page 2</h1>
    <ons-button ng-click="app.slidingMenu.toggleMenu()">Toggle Menu</ons-button>
</div>
<a href="page2.html"><input type="button" width="30px" height="15px"></a>

</ons-page>

です
個人で追加したものは下から2行目のところです

1 件の回答 1

2

<a href="page2.html">で遷移するとページ全体にpage2.htmlが読み込まれてindex.htmlの制御下から外れるんじゃないかなと思います。

質問に何がしたいという記述がありませんのでここからは余談になりますが、
Page2から画面を遷移したいのであればPage2をons-navigator配下にしてpushPageを使うと良いと思います。

ons.bootstrap();
<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.0-beta/build/css/onsenui.css" rel="stylesheet"/>
<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.0-beta/build/css/onsen-css-components.css" rel="stylesheet"/>
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.0-beta/build/js/angular/angular.min.js"></script>
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.0-beta/build/js/onsenui.min.js"></script>

<ons-sliding-menu
  main-page="page1.html"
  menu-page="menu.html"       
  side="left"
  max-slide-distance="250px"
  var="menu">
</ons-sliding-menu>

<ons-template id="page1.html">
  <ons-page>
    <ons-toolbar>
      <div class="left">
        <ons-toolbar-button ng-click="menu.toggleMenu()"><ons-icon icon="ion-navicon" style="font-size: 32px; width: 1em;"></ons-icon></ons-toolbar-button>
      </div>
      <div class="center">Page 1</div>
    </ons-toolbar>

    <p style="text-align: center; color: #999; padding-top: 100px;">Page1 Contents</p>
  </ons-page>
</ons-template>

<ons-template id="page2.html">
  <ons-navigator var="navi">
    <ons-page>
      <ons-toolbar>
        <div class="left">
          <ons-toolbar-button onclick="menu.toggleMenu()"><ons-icon icon="ion-navicon" style="font-size: 32px; width: 1em;"></ons-icon></ons-toolbar-button>
        </div>
        <div class="center">Page 2</div>
      </ons-toolbar>

      <p style="text-align: center; color: #999; padding-top: 100px;">Page2 Contents</p>
      <div style="text-align: center"><a href="#" ng-click="navi.pushPage('page3.html')">Page 3</a></div>
    </ons-page>
  </ons-navigator>
</ons-template>

<ons-template id="page3.html">
    <ons-page>
      <ons-toolbar>
        <div class="left">
          <ons-back-button>Back</ons-back-button>
        </div>
        <div class="center">Page 3</div>
      </ons-toolbar>

      <p style="text-align: center; color: #999; padding-top: 100px;">Page3 Contents</p>
  </ons-page>
</ons-template>

<ons-template id="menu.html">
  <ons-list>
    <ons-list-item modifier="chevron" onclick="menu.setMainPage('page1.html', {closeMenu: true})">
      page1.html
    </ons-list-item>
    <ons-list-item modifier="chevron" onclick="menu.setMainPage('page2.html', {closeMenu: true})">
      page2.html
    </ons-list-item>
  </ons-list>
</ons-template>

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。