Question

我正在创建一个离子1应用程序，我想打开一个页面，当我点击我试图使用在线教程这样做的按钮但似乎没有帮助我。我知道如何用HTML做但我和＃ 39;我是棱角分明的新人。

的index.html

<body ng-app="starter">

    <ion-pane>
      <ion-header-bar class="bar-stable">
        <h1 class="title">Ionic Blank Starter</h1>
      </ion-header-bar>
      <div class="bar bar-header">
  <h1 class="title">Header</h1>
</div>
<div class="bar bar-subheader">
  <h2 class="title">Sub Header</h2>
  <div class="button-bar bar-balanced">
  <a class="button">First page </a>
  <a class="button">Second page </a>
  <a class="button">Third page</a>
</div>
</div>
      <ion-content>
      </ion-content>
    </ion-pane>
  </body>

App.js

angular.module('starter', ['ionic'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    if(window.cordova && window.cordova.plugins.Keyboard) {

      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);


      cordova.plugins.Keyboard.disableScroll(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
})

Answer 1

Ionic默认使用angular的ui路由，所以你可以这样做：

angular.module('starter', ['ionic'])
    .config(function ($stateProvider, $urlRouterProvider) {
    $stateProvider
        .state("first", {
            url: "/first",
            template: "<div>This is first page</div>"
        });
    // other states

    // default
    $urlRouterProvider.otherwise("/first");
});

然后在你的按钮中：

<a class="button"
   ui-sref="first">First page </a>

在某处让Ionic知道在哪里加载您的观点：

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

Answer 2

使用ui-sref，它会改变html页面的状态，因为angular是一个单页应用程序，不需要点击，无论你怎么说你的页面状态就是你在ui-sref中调用的内容。例如

.state（'thispage'，{

url：'thispage'，

templateUrl：'/ thispage.html'，

// controller：'thispageCtrl'

}

这一切都在国家提供商内..

如何将html页面链接到离子使用角度的按钮？

2 个答案: