Question

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

你能否告诉我如何在离子使用按钮栏中实现这一点。我的代码是

<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>

Answer 1

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

这里有几件事情错了。您可能希望对angular-ui-router进行一些阅读以及如何使用它。到目前为止，它是学习Ionic最艰难的部分，因此阅读文档是值得的。

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

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

1 个答案: