Using AngularJS, this:
<a ng-click="Click()" ng-href="#">Click me</a>
Does a redirect to /# in IE8. As does this:
<a ng-click="Click()" href="#">Click me</a>
And this:
<a ng-click="Click()">Click me</a>
That last one goes to /. I'm following all of the guidelines for making IE happy:
<!--[if lt IE 9]>
<script src="js/3rd party/html5.js"></script>
<![endif]-->
<!--[if lte IE 8]>
<script>
document.createElement('ng-include');
document.createElement('ng-pluralize');
document.createElement('ng-view');
document.createElement('ng:include');
document.createElement('ng:pluralize');
document.createElement('ng:view');
</script>
<![endif]-->
<!--[if lt IE 8]>
<script src="js/3rd party/json2.js"></script>
<![endif]-->
Including using this:
<div ng-view></div>
It doesn't happen in IE7 or any of the good browsers. Only IE8.
All I want it to do is call my scope's Click function, without doing any redirects. How can I make that happen in IE8?
button doesn't work properly in IE8.
Turn off the html5Mode
$locationProvider.html5Mode(false);
This will solve the problem, but my question is why?
A better solution is to use button instead of a
<button ng-click="Click()" class="link">Click me</button>
You can change the style of the button with your css
button.link { border:none; background: none;}
button.link:hover {text-decoration:underline}
I know this is an old post, but return false; doesn't work in ng-click handler.
I found I had to set the event.result to false, this way jQuery consumes the event after angular has done it's bit
$scope.Click = function ($event) {
// needed for IE8 - jQuery will preventDefault action for href=#
if ($event != undefined) {
$event.result = false;
}
}
Click me
This is particularly helpful if you're using bootstrap, where you have a dropdown menu .e.g
<button type="button" class="btn dropdown-toggle btn-primary" ng-disabled="disabled">
Actions <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#" ng-click="Click1($event)">Option 1</a></li>
<li><a href="#" ng-click="Click2($event)">Option 2</a></li>
<li><a href="#" ng-click="Click3($event)">Option 3</a></li>
</ul>