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.

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.

angular.module('ionicApp', ['ionic'])
.directive('menuClose', function($state, $ionicHistory) {
return {
restrict: 'AC',
// Use a higher priority than the Ionic Framework menu-close
priority: 1,
// Prevents the lower priority directive from compiling
terminal: true,
link: function($scope, $element, $attrs) {
$element.bind('click', function() {
var href = null;
// Convert the current state to an href
var currentHref = $state.href($ionicHistory.currentStateName());
var sideMenuCtrl = $element.inheritedData('$ionSideMenusController');
// If couldn't get the side menu delegate skip the rest
// Perhaps menu-close was used in app without sidemenu
if(!sideMenuCtrl) {
return;
}
// Get the href if used with `ui-sref`
if($attrs.uiSref) {
href = $state.href($attrs.uiSref);
}
if($attrs.href) {
href = $attrs.href;
}
if(href === currentHref) {
// Already on the current view, just close the side menu
sideMenuCtrl.close();
} else {
// Going to a new view
$ionicHistory.nextViewOptions({
historyRoot: true,
disableAnimate: true,
expire: 300
});
sideMenuCtrl.close();
}
});
}
};
})
view raw menu-close.js hosted with ❤ by GitHub

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.