如何使用 Angular 将 html 页面链接到 ionic 中的按钮？答案

【问题标题】：How can i link an html page to an button in ionic using angular?如何使用 Angular 将 html 页面链接到 ionic 中的按钮？
【发布时间】：2017-03-04 00:12:53
【问题描述】：

我正在制作一个 ionic 1 应用程序，当我点击一个按钮时我想打开一个页面我是 Angular 的新手。

索引.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();
    }
  });
})

【问题讨论】：

我在您的应用中看不到任何路由机制，也没有任何操作绑定到您的按钮。先做一些教程
我已经完成了有关角度的教程，它们都显示了使用 ngrouting 的方法，当我实施时，我在 ionic 中什么都不做，这就是为什么我提供了一个空白代码，以便有人可以告诉我我该怎么做。

标签： html angularjs ionic-framework

【解决方案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>

【讨论】：

Devqon 在我单击按钮时不需要 onclick() 吗？
不，这就是ui-sref 的用途。您也可以在 ng-click 中执行此操作，但仅当您应用更多逻辑而不仅仅是路由时，您才应该这样做

【解决方案2】：

使用 ui-sref，它会改变 html 页面的状态，因为 angular 是一个单页应用程序，因此不需要点击，无论您如何命名页面状态，您在 ui-sref 中调用的状态都是.比如

.state('thispage', {

网址：'本页'，

templateUrl: '/thispage.html',

// 控制器：'thispageCtrl'

}

这一切都在状态 Provider..

【讨论】：