Add new "item" to "ion-list" within the ion-"sidemenu"

ionic-v1
1

Hello guys!
First I apologize for not speaking English correctly.
I have the following question: I created a default project “ionic start MyApp SideMenu” this way:

<ion-side-enable-menus menu-back-with-views="false">
    <ion-side-menu-content>
        <ion-nav-bar class="bar-balanced">
            <ion-nav-back-button>
            </ion-nav-back-button>

            <ion-nav-buttons side="left">
                <button class="button button-button icon-clear ion-navicon" menu-toggle="left">
                </button>
            </ion-nav-buttons>
        </ion-nav-bar>
        <ion-nav-view name="menuContent"></ion-nav-view>
    </ion-side-menu-content>

    <ion-side-menu>
        <ion-content>
            <ion-list>      
                <the class="item-icon-left" href="#/app/playlists" menu-close nav-clear>
                    <i class="icon ion-ios-home-outline"></i>
                    Home
                </a>

                <the class="item-icon-left" ng-click="login()" menu-close>
                    <i class="icon ion-social-rss-outline"></i>
                    Get Network BeZz
                </a>

                <the class="item-icon-left" href="#/app/search" menu-close nav-clear>
                    <i class="icon ion-ios-gear-outline"></i>
                    Settings
                </a>

                <the class="item-icon-left" href="#/app/browse" menu-close nav-clear>
                    <i class="icon ion-ios-information-outline"></i>
                    About
                </a>    
            </ion-list>
        </ion-content>
    </ion-side-menu>
</ion-side-menus>

However, I tried to add the list of “Menu” but it didn’t work, even though I’m creating a new file that would be the qrcode.html
In this way:

<the class="item-icon-left" href="#/app/qrcode" menu-close nav-clear>
    <i class="icon ion-ios-barcode-outline"></i>
    QrCode Reader
</a>

What did I do wrong? Or what is the way to do this correctly?
Thank you in advance.
Thank you!
;D

2

I formatted your post into code blocks. You have some anchor tags beginning with the instead of a. I’m not sure if that is a paste error.

What exactly isn’t working? The menu item isn’t showing up at all, or the link to that view isn’t working?

3

Well, I can insert options in the “Menu” without any problem. But I can’t go to the page of the selected option.
Say, that if I click on “Get Network BeZz,” he will take me to the page “ng-click =” login () ". And so on.
So I wanted to add an option to “Menu” and click, he take me to page. I tried to add a new html page but it doesn’t work.
Understand?

4

Yes. Can you post the structure of your states? Should look something like this:

$stateProvider
    .state('app', {
        url: '/app',
        templateUrl: 'templates/app.html',
        abstract: true
    })
    ...
5

Hi!
Just an advice: Your HTML is really messy. Try to organize it before posting. :smile:

Maybe the error is the fact your anchor begins with “the” and closes with “a”. And make sure you add “href” attribute.

6

Hi guys. Thanks, that actually the "appeared due to translation. But it’s the same that is in my code.

brandyshea

Then, I saw someone talking about exactly that. I even tried but without success.
In fact, the file you are talking about is the www\js\app.js? Correct?
And referring to the code, is here:
I haven’t changed anything from him.

    $stateProvider

  .state('app', {
    url: "/app",
    abstract: true,
    templateUrl: "templates/menu.html",
    controller: 'AppCtrl'
  })

  .state('app.search', {
    url: "/search",
    views: {
      'menuContent': {
        templateUrl: "templates/search.html"
      }
    }
  })

  .state('app.browse', {
    url: "/browse",
    views: {
      'menuContent': {
        templateUrl: "templates/browse.html"
      }
    }
  })
    .state('app.playlists', {
      url: "/playlists",
      views: {
        'menuContent': {
          templateUrl: "templates/playlists.html",
          controller: 'PlaylistsCtrl'
        }
      }
    })

  .state('app.single', {
    url: "/playlists/:playlistId",
    views: {
      'menuContent': {
        templateUrl: "templates/playlist.html",
        controller: 'PlaylistCtrl'
      }
    }
  });
  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/app/playlists');
});

Tks!

7

Yes, you need to add the qrcode as a state:

.state('app.qrcode', {
    url: "/qrcode",
    views: {
      'menuContent': {
        templateUrl: "templates/qrcode.html",
        controller: 'QrcodeCtrl'
      }
    }
})

There is a good explanation of routing at @nraboy’s blog: https://blog.nraboy.com/2014/11/using-ui-router-navigate-ionicframework/