List Item without Link

Hi! I have a very simple list like this, but when I press the item, I have been redirect to Home (the href="#" is not working). Can someone explain me why?

> <div class="list">
> 	<div class="item item-divider item-icon-left">
> 		<i class="icon ion-ios7-calendar-outline"></i>
> 		Day 1
> 	</div>
> 	<a class="item" href="#">
> 		Activity 1
> 		<span class="item-note">
> 			08:00 AM
> 		</span>
> 	</a>
> </div> 

I have this in my app.js:

// if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/app/welcome');

Regards

1 Like

Hi!
see the <a> click handling in angular: LINK you see that only href="" are known as not-link that have link behaviour (without href attribute it isn’t a link anymore so it should be there)

I have three solutions:
(note I’m not sure of number 1 and 2, I made this solutions right now, by reading the a.js in angular, if they didn’t work use 3. it will probably work)

  1. use <a class="item" href=""> or <a class="item" href>

  2. use <a class="item" href="javascript:">

  3. if you have use many #'s and don’t want to edit them, the simple way is to add this directive:

    app.directive(‘a’, function() {
    return {
    restrict: ‘E’,
    link: function(scope, elem, attrs) {
    if(attrs.ngClick || attrs.href === ‘#’ || attrs.href === ‘’ ){
    elem.on(‘click’, function(e){
    e.preventDefault();
    });
    }
    }
    };
    });

and there is another solution similar to 3:
use ng-click="do($event)"
and inside controller.do($event)
you can use $event.preventDefault()

NOTE: sorry for my bad English :smile:

Thanks!! It’s works!! :wink:

which one works ??? :smiley:

I have used empty href :smile:

1 Like