The ionic tutorial http://ionicframework.com/tutorials/fade-status-bar/ says to watch sideMenuController.getOpenRatio() but upon inspecting the scope of an ion-side-menus element in chrome - it seems the scope doesn’t actually have any sideMenuController.
After having a look through the source i noticed the ionSideMenus directive uses angular.extend(this, ionic.controllers.SideMenuController.prototype - this contains the sideMenuController with getOpenRatio() etc but it is private
I assume the developers want us to “acquire” the sideMenuController differently, but haven’t updated the docs yet
The tutorial is relatively old and since the Beta release the sideMenu(s)Controller is deprecated in favor of the $ionicSideMenuDelegate injectable. Perhaps you can use that one for your specific needs.
Could you please explain to me how you fixed this issue? I’m new to Iconic and AngularJS. I’ve tried to implement the Fade Status Bar with the current 1.0.0 Beta, but couldn’t manage it to make it work.
’,
replace: true,
link: function($scope, $element, $attr) {
// Run in the next scope digest
$timeout(function() {
// Watch for changes to the openRatio which is a value between 0 and 1 that says how “open” the side menu is
$scope.$watch(‘sideMenuController.getOpenRatio()’, function(ratio) {
// Set the transparency of the fade bar
$element[0].style.opacity = Math.abs(ratio);
});
});
}
}
});
I tried to replace ‘sideMenuController.getOpenRatio()’ with $ionicSideMenuDelegate.getOpenRatio() but that didn’t work either.
So this now works, just the syntax is a bit off from the original.
//Fadebar Directive
.directive('fadeBar', function ($timeout, $ionicSideMenuDelegate) {
return {
restrict: 'E',
template: '<div class="fade-bar"></div>',
replace: true,
link: function ($scope, $element, $attr) {
// Run in the next scope digest
$timeout(function () {
// Watch for changes to the openRatio which is a value between 0 and 1 that says how "open" the side menu is
$scope.$watch(function () {
return $ionicSideMenuDelegate.getOpenRatio();
},
function (ratio) {
$element[0].style.opacity = Math.abs(ratio);
});
});
}
}
})