0

I'm developing an app with Ionic and Angular Material. Now I'm struggling to get Ionics back button to work when it is used under the mdToolbar directive of angular material.

You can see the problem here: http://plnkr.co/edit/lfVVa4KAUkOFLOL1nQET

In index.html <ion-nav-bar> is located under the <mdToolbar> (line 59) tag and the back button and the title does not show up when navigating.

If the <ion-nav-bar> tag is listed anywhere else it works fine.

Any suggestions where the problem is and how to solve it?

While investigating this issue further it seems in ionic.bundle.js:48400 (function getAssoctiatedNavBarCtrl()) navBarDelegate is not initialized properly. But currently I have no idea why...

matcauthon
  • 2,261
  • 1
  • 24
  • 41
  • If u mix Ionic & angular-material, you will have lots of issues. See this post http://stackoverflow.com/a/29326397/3322160 – nitin Apr 20 '15 at 08:38
  • @nitin Yes I see, there are some issues but it still has advantages (integrated build managment, cordova usage, ...). But if I only use angular-material, then how can I get the back-button functionality (also of the device back button) eg. from ui.router? – matcauthon Apr 20 '15 at 09:03
  • Ionic is made for mobile, it has its advantages. If u want material design, go for angular-material + cordova. You can get back-button functionality inside angular-material by using $location service (https://docs.angularjs.org/guide/$location) – nitin Apr 20 '15 at 14:44

1 Answers1

0

If you are interested in material-design, then I recommend you to use Angular-material + Cordova.

Here is yr plunk edited

You will have to reorganize yr base layout : 

<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>
nitin
  • 3,747
  • 2
  • 24
  • 31