Recently, a bug was introduced into the Ionic Framework menu-close
directive. It's an easy bug to overlook because the user has to do something unintuitive to encounter it.
Here's a working example of the issue. The app loads on the Attendees List. If you tap a person, you'd go to a details view. All works well. However, if you open the sidemenu, tap "Attendees", and THEN tap a person, things get messed up. The back button is gone. This is because the menu-close directive in Ionic Framework 1.0.1 tells the app that the next navigation event should replace the history stack.
See the Pen Side Menu and Navigation: Nightly by Justin Noel (@calendee) on CodePen.
Fortunately, the Ionic Framework team has already fixed this issue. The fix is available in the nightlies. However, if you're stuck using an official release, you can't get the fix.
The Ionic Framework team fixed the issue by wrapping the configuration of $ionicHistory.nextViewOptions
in a 300ms timeout.
When faced with this problem for an app I'm working on, I approached it slightly differently. Instead of using a timeout, the new menu-close
directive actually compares the current state against the intended state. If they are the same, the $ionicHistory.nextViewOptions
will not be applied and the history stack won't get replaced.
Notice the priority: 1, terminal: true
in the directive above. This is how you can override any other directive in your source. Basically, you tell AngularJS that this directive has a higher priority than any other directive of the same name. Then, then terminal: true
property tells AngularJS to not bother compiling any lower priority directive. Tada! You've just overridden another custom directive with your own.
You can do the same thing with any AngularJS directive. If you don't like how AngularJS does something with a form element, simply override it.
See the Pen Replace Ionic Framework Menu Close by Justin Noel (@calendee) on CodePen.