How to add a link in sidebar menu item?


#1

I would like to have a “plus” icon in my sidebar menu item:

http://dl.dropbox.com/u/1893981/Screenshots/fvdm.png

  <ion-side-menu side="left">
    <header class="bar bar-header bar-dark">
      <h1 class="title">Menu</h1>
    </header>
    <ion-content class="has-header">
      <div class="list">
        <a class="item item-icon-left item-icon-right" ui-sref="app.feed" nav-clear menu-close>
          <i class="icon ion-social-rss"></i>
          All Feeds
          <i class="icon ion-plus"></i>
          <i class="icon ion-chevron-right icon-accessory"></i>
        </a>
      </div>
      ...
    </ion-content>
  </ion-side-menu>

I want this plus icon to change a state when clicked. So basically, I would to replace:

<i class="icon ion-plus"></i>

with:

<a ui-sref="app.new-feed">
  <i class="icon ion-plus"></i>
</a>

But, it breaks things:

http://dl.dropbox.com/u/1893981/Screenshots/s9uw.png

I guess this is because I can’t have <a> inside <a>.

Any ideas how to fix this?


#2

So you want he icon to act as a link with in a link? You should have separate links for them instead.


#3

I wonder if there is a “nice” way to achieve this in the current version of Ionic, or the only way to achieve this would be to write custom CSS.
How would you implement this?


#4

Having 3 links side by side?