个人中心
gpt4 book ai didi

angularjs - 路由时 ionic 导航栏按钮消失

转载 作者：行者123 更新时间：2023-12-02 22:55:14 24 4
gpt4 key购买 nike

我有一个带有导航栏和左侧菜单的 Ionic 应用程序。导航栏包含一个“汉堡包”按钮，可扩展左侧菜单。侧面菜单包含链接到应用程序不同内容区域的按钮列表。从内容菜单中的项目导航时，应用程序的内容区域会正确更新，并且汉堡包图标仍保留在导航栏中。从内容区域中的按钮导航时，汉堡包图标会从导航栏中消失。

以下代码演示了 ( http://codepen.io/FrizziestFuture/pen/pJgvPN )。此处，页面 A 上的按钮链接到页面 B，但导致汉堡包图标消失。侧面菜单链接正常工作。

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
  <title></title>
  <link href="http://code.ionicframework.com/1.0.0-rc.5/css/ionic.css" rel="stylesheet">
  <script src="http://code.ionicframework.com/1.0.0-rc.5/js/ionic.bundle.js"></script>
</head>

<body ng-app="myApp">
  <ion-side-menus>
    <ion-pane ion-side-menu-content>
      <ion-nav-bar class="bar-balanced">
        <ion-nav-buttons>
          <button menu-toggle="left" class="button button-icon ion-navicon"></button>
        </ion-nav-buttons>
      </ion-nav-bar>
      <ion-nav-view></ion-nav-view>
    </ion-pane>
    <ion-side-menu side="left">
      <ion-content>
        <ion-list>
          <ion-item nav-clear menu-close ui-sref="pageA">Page A</ion-item>
          <ion-item nav-clear menu-close ui-sref="pageB">Page B</ion-item>
        </ion-list>
      </ion-content>
    </ion-side-menu>
  </ion-side-menus>
</body>
<script id="templates/pageA.html" type="text/ng-template">
  <ion-view>
    <ion-content>
      <h1>Page A</h1>
      <button ui-sref="pageB">Go to Page B</button>
    </ion-content>
  </ion-view>
</script>
<script id="templates/pageB.html" type="text/ng-template">
  <ion-view>
    <ion-content>
      <h1>Page B</h1>
    </ion-content>
  </ion-view>
</script>
<script src="myApp.js"></script>
</html>

angular.module("myApp", ["ionic"])
.config(function ($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise("/pageA");

    $stateProvider
    .state("pageA", {
        url: "/pageA",
        templateUrl: "templates/pageA.html"
    })
    .state("pageB", {
        url: "/pageB",
        templateUrl: "templates/pageB.html"
    });
});

最佳答案

天啊。我花了很多时间才找到它，所以我必须在这里更明确地分享它。

所有功劳归于 Stefan van de Vooren 以及他在此处提供的链接。

Button Hidden On Child Views By default, the menu toggle button will only appear on a root level side-menu page. Navigating in to child views will hide the menu- toggle button. They can be made visible on child pages by setting the enable-menu-with-back-views attribute of the ionSideMenus directive to true.

<ion-side-menus enable-menu-with-back-views="true">

来源由 Stefan van de Vooren 提供:http://ionicframework.com/docs/api/directive/menuToggle/

关于angularjs - 路由时 ionic 导航栏按钮消失，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30115469/

24 4 0
文章推荐： wordpress - 如何使用哈希和盐键获取WordPress密码？
文章推荐： wordpress - 删除页面上的 Yoast WordPress SEO
文章推荐： angularjs - 为什么 ng-selected 不能与 ng-repeater 一起使用？
文章推荐： PowerShell，运行外部进程时流处理输出和错误
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com