-
Couldn't load subscription status.
- Fork 27.3k
IE9 error with ng-click and no href #7721
Description
In IE9, with hashbang mode enabled, and having injected the $location service (not just configured the provider), an anchor with an ng-click but no href causes an exception when clicked:
Unable to get the value of the property 'indexOf': object is null or undefined
To reproduce, put this in a file named ie9 and run python -m SimpleHTTPServer 5000, then visit http://localhost:5000/ie9/.
<!DOCTYPE html>
<html ng-app="app">
<head>
<base href="/ie9/" />
<script src="https://code.angularjs.org/1.3.0-beta.10/angular.js"></script>
</head>
<script>
var app = angular.module('app', []);
app.config([
'$locationProvider',
function($locationProvider){
$locationProvider.html5Mode(true);
$locationProvider.hashPrefix('!');
}
]);
app.controller('ctrl', [
'$scope',
'$location', // Note that we inject $location here!
function($scope, $location){
$scope.alert = function(s){ window.alert(s); };
}
]);
</script>
<body ng-controller="ctrl">
<a ng-click="alert('hi!')">
<span>Click me!</span>
</a>
</body>
</html>
Note that you must inject $location to see the issue; the offending line is in $location and is only run when the service is instantiated.
There are several ways to "solve" the problem, but I'm not sure which is best. It seems that the implementation of the a (anchor) directive could stopPropagation as well as preventing default, or we could simply check for empty/undefined href attributes at that point in $location.