I want to have a side-menu only for one tab in the tab bar, but apparently you can’t add a side menu to only one tab.
I can show the left button “hamburger” icon only for one view, but I can’t figure out how to stop the other tabs from being able to drag out the first tab’s side-menu.
Any ideas for killing the slide gesture? I tried to set $scope.dragContent to false in the $rootScope, but alas.
See some of the issues in this discussion:
I saw that - I added the noDragRight directive, but you can still drag the title bar in that Plunker. I think the now built-in Ionic drag-content="false" would work if it allowed an angular scope expression other than true/false. That way each controller could set it manually.
I’ll have to dig into the gestures code to see if I can grab the event somewhere and kill (and re-enable) it, but it would be nice if this was a feature.
Alternately, what I’d really like to do is to allow side menus in the tabbed view rather than in the global index.html view - then this gesture chicanery wouldn’t be necessary.
Thanks for the Plnkr Calendee, the no-drag-right attribute worked like a charm!!! Exactly what I needed. That may be something useful enough to build into Ionic itself. 
Actually, you would be better off using the method in the topic below. Ionic already has a means to disable dragging the side-menu. My little directive doesn’t work in FireFox.
It’s a bit odd that there is a drag-content=“false” tag added to the content on the about page and it seems to serve no purpose since the drag-content=“main.dragContent” on the ion-pane is the only tag that seems to matter and that is updated via the main controller.
Poof! It’s gone. That was just an artifact from me testing. It served no purpose.
Thanks for pointing it out.
Hey! Im new to ionic and angularjs… Im trying few things here and there ^^.
I just tested your code on plnkr and its awesome. But i fail at using it in my case xD.
You set drag-content=“false” in about.html and the result shows that it works.
What im trying to do is to set drag-content=“false” in about.html about.html
is a tab in my application. I have three tabs: A,B,C. I want to open the side menus(left, right) only
when im in tab B. Other than setting drag-content=“false” in ion-content in the current html e.g. in about.html
and setting the controllers what else do i have to do to get access to sidemenus jsut in tab B?
The drag-content is watched by the sideMenuContent. So, you can change it on the fly depending on which tab you are on. Tabs have an on-selected attribute. When a tab is selected, you can then decide what to do to the draggability of the side menu.
If you setup a CodePen sample of your scenario, I can try to help out on it.
That’s kind of you!
The link: http://plnkr.co/edit/pHxOSEHtF9YFfasVE1Zg?p=preview
Btw… I just thought of another option, which i tried too. I had my side menus only in my friends-tab.html not my index.html. That worked very very well. I could acces my side menus only in friends-tab.html, which is my desire. The problem in that option is, that the side menus doesnt drag the header and the footer. Additionally, the headers of the menus are behind the header which is declared in index.html. If i could bring the header of the side menus in friends-tab.html to the front and make the menus drag the header/footer of my index.html, that would be even better because i wouldn’t need a Ctrl to set drag-content = “false” to disable the side menus in every template except in friends-tab.html.
Thanks for your help!
Here’s a working example using the on-select and on-deselect events on the the friends tab.
YES! That worked. TY! I am able to open the side menus after i click on an li item but thats fine xD.
I just noticed that i dont have my nav-bar once i hit either settings or search in my left panel. I get to the corespoding template but nav-bar isnt showing. Any idea?
In the demo I linked to, the navbar shows just fine. However, the tab-bar does not. That’s because the “settings” view is not inside the tab state. It’s a completely independent view.
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('search', {
url: '/search',
templateUrl: 'search.html'
})
.state('settings', {
url: '/settings',
templateUrl: 'settings.html'
})
.state('tabs', {
url: "/tab",
abstract: true,
templateUrl: "tabs.html"
})
<script id="settings.html" type="text/ng-template">
<ion-view title="Settings">
<ion-content>
Settings page
</ion-content>
</ion-view>
</script>
Use your mentality! To myself! xD Forgot to change that. Ty again sir. Really appreciated.
Im trying to get this work too. If you don’t remember my case…
I have 3 tabs and only 1 tab(friends-tab) has enabled side menus enabled (with help of on-select/deselect).
Now i tried no-drag-right to disable side menus in my setting.html and search.html and they are subordinate to friends-tab. I managed to disable left menu with no-drag-right but the right menu is still enabled and there is a bug to the right menu which is that it wont close sometimes.
Could it be that i cant use no-drag-right on templates which are subordinate to my friends-tab, which has side menus enabled on-select?
here is a Plunker link: http://plnkr.co/edit/6M5fDDBYi5pzHPKXq989?p=preview
Nvm. Now its working. I wrote another Ctrl for no-drag-left and set it in settings/search.html.
Like this:
.directive(‘noDragLeft’, [’$ionicGesture’, function($ionicGesture) {
return {
restrict: ‘A’,
link: function($scope, $element, $attr) {
$ionicGesture.on('dragleft', function(e) {
e.gesture.srcEvent.preventDefault();
}, $element);
}
}
}])
And here:
.controller(‘PanelOffCtrl’, [’$scope’, ‘$location’, function($scope, location) {
$scope.goTo = function(page) {
console.log(‘Going to ’ + page);
$scope.sideMenuController.toggleLeft();
$scope.sideMenuController.toggleRight(); had to add this line
$location.url(’/’ + page);
};
$scope.allowSideMenu = true;
$scope.parentToggleSideMenuAllowed = function() {
console.log('Toggling!');
$scope.allowSideMenu = !$scope.allowSideMenu;
}
}])
Great Calendee, no-drag-right is very cool !!!
Congratulations