sideMenuController getRatio not available in 1.0.0-beta.1

ionic-v1
1

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.

Am i missing something?

2

i have the same problem. anyone knows if the sideMenuController changed in his name or a similar issue?

thanks in advance

3

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

4

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.

5

For anyone else with this issue I submitted a pull request (which was merged) containing the missing getOpenRatio function on the delegate

You need to $ionicSideMenuDelegate.$getByHandle('handleName') and then call getOpenRatio() on that.

Note that the value may not be immediately available.

6

Note that you don’t actually need to use $getByHandle if you only have one set of ionSideMenus :slight_smile:

1 Like
7

Hi everyone!

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.

I followed the instructions of this page: Ionic Framework - The Cross-Platform App Development Leader

The javascript code from there is:

/ The fadeBar directive
.directive(‘fadeBar’, function($timeout) {
return {
restrict: ‘E’,
template: ‘

’,
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.

Thanks for your help!

Best,
Valentin

8

Have you tried this with beta 3?

9

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);
                    });
            });
        }
    }
})
2 Likes