Angular 材料设计 mdToolbar 和 Ionic ion-nav-bar 集成答案

【问题标题】：Angular material design mdToolbar and Ionic ion-nav-bar integrationAngular 材料设计 mdToolbar 和 Ionic ion-nav-bar 集成
【发布时间】：2015-04-20 22:59:45
【问题描述】：

我正在使用 Ionic 和 Angular Material 开发一个应用程序。现在，当在角度材料的mdToolbar 指令下使用 Ionics 后退按钮时，我正在努力让它工作。

您可以在这里看到问题： http://plnkr.co/edit/lfVVa4KAUkOFLOL1nQET

在 index.html 中，<ion-nav-bar> 位于 <mdToolbar>（第 59 行）标签和后退按钮下，导航时标题不显示。

如果<ion-nav-bar> 标记列在其他任何地方，它就可以正常工作。

有什么建议可以解决问题吗？

在进一步调查此问题时，似乎 ionic.bundle.js:48400 (function getAssoctiatedNavBarCtrl()) navBarDelegate 未正确初始化。但目前我不知道为什么......

【问题讨论】：

如果你混合离子和角材料，你会遇到很多问题。看到这个帖子stackoverflow.com/a/29326397/3322160
@nitin 是的，我明白了，存在一些问题，但它仍然具有优势（集成构建管理、cordova 使用......）。但是，如果我只使用角度材料，那么我怎样才能获得后退按钮功能（也是设备后退按钮的功能），例如。来自 ui.router？
Ionic 是为移动设备设计的，它有它的优势。如果您想要材料设计，请选择 angular-material + cordova。您可以使用 $location 服务 (docs.angularjs.org/guide/$location) 获得 angular-material 中的后退按钮功能

标签： angularjs ionic-framework ionic angular-material

【解决方案1】：

如果你对材料设计感兴趣，那么我推荐你使用 Angular-material + Cordova。

Here is yr plunk edited

你将不得不重新组织你的基本布局：

<body layout="column" ng-controller="AppCtrl" md-swipe-right="openSidenav('left')" md-swipe-left="closeSidenav('left')">
  <md-sidenav layout="column" class="md-sidenav-left md-whiteframe-z2" md-component-id="left" md-is-locked-open="$mdMedia('gt-md')">
  </md-sidenav>

  <ion-nav-bar layout="column" class='bar-positive'>
  </ion-nav-bar>

  <div class="row" style="min-height:400px">
   <div layout="column" class="relative" layout-fill="" role="main">
    <md-toolbar>
    </md-toolbar>
    <md-content flex="" md-scroll-y="">
        <ion-nav-view layout="column" layout-fill="" layout-padding="" class="ui-view-container"></ion-nav-view>
     </md-content>
   </div>
  </div>
</body>

【讨论】：