如何在角度+离子中打开按钮单击视图？答案

【问题标题】：how to open view on button click in angular +ionic?如何在角度+离子中打开按钮单击视图？
【发布时间】：2015-05-29 05:17:36
【问题描述】：

你能告诉我如何在 ionic 中打开按钮点击视图。实际上我有三个按钮和三个视图。我想一次显示一个视图。就像我点击 Breakfast 时一样显示 Breakfast.html 页面。当我单击 lunch 时，它显示的 lunch.html 与晚餐相同。我需要在按钮单击时一次显示一页

您能告诉我如何使用按钮栏在 ionic 中实现此功能。这是我的代码

http://codepen.io/anon/pen/pJRJLj

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

  <title>Tabs Example</title>

  <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
  <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>

<body ng-controller="MainCtrl">
<ion-header-bar align-title="center" class="bar bar-header bar-balanced">
  <div class="buttons">
    <i style="font-size:30px;" class='icon ion-chevron-left'></i>
  </div>
  <h1 class="title">Title!</h1>

</ion-header-bar>
<ion-content>
<div class="button-bar">
  <a class="button" ng-class="{'button-positive': isActive('breakfast')}" ng-click="setActive('breakfast')">Breakfast</a>
            <a class="button" ng-class="{'button-positive': isActive('lunch')}" ng-click="setActive('lunch')">Lunch</a>
            <a class="button" ng-class="{'button-positive': isActive('dinner')}" ng-click="setActive('dinner')">Dinner</a>
</div>

  </ion-content>
<script type="text/ng-template" id="Breakfast.html">
  <ion-view>
    <ion-content padding="true">
       <h2>Breakfast the app</h2>
       <p>Breakfast ipsum dolor sit amet, consectetur adipisicing elit. Facilis Breakfast hic officia quasi excepturi sequi deleniti maiores consectetur veritatis sint?</p>
    </ion-content>
  </ion-view>
</script>

  <script type="text/ng-template" id="Lunch.html">
  <ion-view>
    <ion-content padding="true">
       <h2>Lunch the app</h2>
       <p>Lunch ipsum dolor sit amet, consectetur adipisicing elit. Facilis Breakfast hic officia quasi excepturi sequi deleniti maiores consectetur veritatis sint?</p>
    </ion-content>
  </ion-view>
</script>


  <script type="text/ng-template" id="Dinner.html">
  <ion-view>
    <ion-content padding="true">
       <h2>Dinner the app</h2>
       <p>Dinner ipsum dolor sit amet, consectDinneretur adipisicing elit. Facilis Breakfast hic officia quasi excepturi sequi deleniti maiores consectetur veritatis sint?</p>
    </ion-content>
  </ion-view>
</script>
</body>

</html>

【问题讨论】：

您需要定义应用的“状态”。见文档：learn.ionicframework.com/formulas/navigation-and-routing-part-1
@aorfevre 是的，我知道这一点。但是我已经有视图显示（其中存在三个按钮）。下面我需要显示另一个视图。这怎么可能？
请在您的代码笔中添加对 Angular 库的引用。
并添加您的 $state 配置
谢谢你能不能使用代码并给出答案以便更好地理解

标签： angularjs angularjs-directive angularjs-scope ionic-framework ionic

【解决方案1】：

调试的codepen：http://codepen.io/anon/pen/wagMXm

这里有几件事是错误的。您可能想了解一下angular-ui-router 以及它是如何使用的。这是迄今为止学习 Ionic 中最困难的部分，因此值得您花时间阅读文档。

我建议将您的视图用作单独的页面。它使跟踪您的视图历史记录和层次结构变得更加容易。
我还建议您将ion-content 指令保留在他们的模板中。同样，如果您的视图完全封装，则更容易跟踪它们
ion-view 需要父指令 ion-nav-view，这意味着您的 ion-view 必须始终嵌套在 ion-nav-view 内。这是为了确保$ionicHistory 和其他服务可以跟踪您在应用程序中的位置，从而更轻松地控制导航流程。
ui-sref 用于从 <a> 元素转换到状态。 ui-sref-active 允许您在状态处于活动状态时设置一个类。
config 块中的状态声明在语法上不正确。再次阅读ui-router 将对此有所帮助。

【讨论】：