

onsen-uiのテンプレート(page2.html)のコードの下に  
  
を加えたのですがボタンを押すとそれまでに記載されていた違うボタンなどが崩れてしまいます  
なぜでしょうか？

[code]

    <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>
    
[/code]

* * *

訂正です

[code]

    <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>
    
[/code]

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


CC BY-SA 3.0
2015-04-13T02:20:06.543
9090
2015-04-13T12:26:28.157
2015-04-13T12:26:28.157
33
9289
question
monaca onsen-ui
onsen-uiを使ってのおえーじ更新について


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

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

[code]

    ons.bootstrap();
[/code]

[code]

    <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>
[/code]


CC BY-SA 3.0
2015-04-13T06:50:17.650
9101
2015-04-13T06:50:17.650
3516
9090
answer