ToggleRight() with links

ionic-v1
1

Hi and thanks for this awesome framework!
I would to close the sideMenu when clicking to a link in that menu, so I tried in this way:

function toggleMenuLink(link) {
    toggleMenu();
    window.location=link;
}

Using a ng-click and adding the ionic.controllers.sideMenuController to the <body> tag:

<button class="button button-icon" ng-click="toggleMenuLink('http://www.google.com/')"><i class="icon ion-home"></i></button>

It obviously doesn’t work, how could I do?
What is the best way to close the sideMenu when clicking to a link?

Thanks in advance :smiley:

2

I fixed this by adding the following to the container that houses the links in the sidemenu:

ng-click="closeSideMenu()"

And in my controller did:

$scope.closeSideMenu = function() {
    $scope.sideMenuController.toggleRight();
}

Hope this helps!

1 Like
3

Thank you for the quick reply @MrJean.

I needed to use a particular function to apply directly to links, cause I have also a search input in my side menu.
So I solved it editing the “ionic-app.js” (I called it in this way) and adding a second function with the link as a parameter:

angular.module('testapp', ['ionic'])

.controller('sideMenuCtrl', function ($scope) {
    $scope.toggleMenu = function() {
        $scope.sideMenuController.toggleRight();
    };
    $scope.toggleMenuLink = function (link) {
        $scope.sideMenuController.toggleRight();
        window.location = link;
    };
})

Then, adding the angular-click event to each link or button in my sideMenu in the html page:

<a class="item" href="" ng-click="toggleMenuLink('calculator')">Calculator</a>
4

Hey @xAlien95, I would use @MrJean’s approach, since using the sideMenuController directly and modifying the ionic code is not recommended. We are changing lots of things quickly in the alpha state, so this could break at any time.

5

Well, now I have left Ionic 0.9.0-alpha and I have updated my “project” to the last release of Ionic (0.9.13-alpha). I broke my project eheheh

In 0.9.0 I only added the tweak for the only-left or only-right sidemenu, and I edited a little bit the ionic.css file. Now, with ionic-angular.min.js (I think angular is included in the minified version), ionic.css and ionic.js, in the console logs appears this error:

Error: [$injector:unpr] Unknown provider: aProvider <- a
http://errors.angularjs.org/1.2.1/$injector/unpr?p0=aProvider%20%3C-%20a

The tutorial I followed was for the previous release.
With the newest do I need to add Ionic in a different way?

Here’s the url of my project, each edit to the css is in a different stylesheet file (styles.css).
Maybe the reason of the error could be the “_js” folder name?

Thanks in advance :yum:

6

Hey @xAlien95. I’m not quite sure why this would be happening. I would try the non-minified version and include angular separately, and then see if that works.

7

I tried, but the error appears also for the non-minified version.
Here you can see the error on a test page.

Thanks for the support :slight_smile:

1 Like
8

Looks like it works now :slight_smile: