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)
-
use <a class="item" href="">
or <a class="item" href>
-
use <a class="item" href="javascript:">
-
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