When using Internet Explorer 8, I'm encountering compatibility issues with Angular.js in my contact form. Despite trying emulation mode in IE 11, the view isn't rendering properly, and the console isn't showing any errors. Could there be something obvious that I'm missing or a more effective way to troubleshoot this problem?
Here's the relevant rendered HTML:
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en" dir="ltr"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en" dir="ltr"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en" dir="ltr"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js" lang="en" dir="ltr" ng-app="contactApp">
<!--<![endif]-->
<head>
<title>Contact</title>
<!-- Meta Data ================ -->
<meta charset="UTF-8" />
<meta name="description" content="Fill this in with your information" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<link href="/bundles/themes/crisp/css?v=pK1cGyJZf_vIrdHwRAD8udDrwCLW4VlqszdBq6edIec1" rel="stylesheet"/>
<script src="/bundles/jquery?v=aLsVjoQ4OTEtRxZ322JRn0RdnugNXJ-_IdXTAvkYpyU1"></script>
<link href="/bundles/less?v=PejI2ZnuZepYh90ntnI8FhCApgGHAiohpYRpz8gcRRg1" rel="stylesheet"/>
<script src="/bundles/modernizr?v=wBEWDufH_8Md-Pbioxomt90vm6tJN2Pyy9u9zHtWsPo1"></script>
<!-- Icons ================ -->
<!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png" />
<!-- For first- and second-generation iPad: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72-precomposed.png" />
<!-- For iPhone with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114-precomposed.png" />
<!-- For third-generation iPad with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144x144-precomposed.png" />
<link rel="shortcut icon" href="favicon.ico" />
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,300,400italic,300italic,700,700italic" rel="stylesheet">
<link href="http://fonts.googleapis.com/css?family=Raleway:300,500,600,700" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
</head>
<body class="index">
<div class="container clearfix" id="main-content" ng-controller="ContactController">
<div class="animated bounceInLeft" ng-view></div>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
<script type="text/javascript" src="http://code.angularjs.org/1.2.14/angular-route.js"></script>
<script type="text/javascript" src="/Content/JS/Controllers/ContactController.js"></script>
<script>
var contactApp = angular.module("contactApp", ['ngRoute']);
contactApp.controller('ContactController', ContactController);
contactApp.config(function ($routeProvider) {
$routeProvider
.when('/',
{
controller: 'ContactController',
templateUrl: '/Content/JS/Views/Forms/MessageForm.html'
})
.when('/refer/',
{
controller: 'ContactController',
templateUrl: '/Content/JS/Views/Forms/ReferForm.html'
})
.otherwise({ redirectTo: '/' });
});
</script>
</body>
</html>
And here is ContactController.js
function ContactController($scope, $location, $http) {
$scope.isSelected = function (route) {
return route === $location.path();
}
$scope.typeButtonSelected = function (value) {
return $scope.message.referraltype === value;
}
$scope.master = { referraltype: 'Neuro' };
$scope.update = function (message) {
console.log("running");
if ($scope.contactform.$valid) {
$("#contactform").hide();
$("#formSelectButtons").hide();
$("#loadingMessage").show(1000);
$http({
url: '/Contact',
method: 'POST',
data: { json: JSON.stringify(message) }
}).success(function (data) {
$("#validationMessage").hide();
if (data.response == 200) {
$("#loadingMessage").fadeOut(500);
$("#successMessage").fadeIn(1000);
$scope.master = data;
console.log(data);
} else {
$("#loadingMessage").fadeOut(500);
$("#contactform").fadeIn(1000);
$("#formSelectButtons").fadeIn(1000);
console.log(data);
}
}).error(function (data) {
$scope.master = { response: 400 };
$("#loadingMessage").fadeOut(500);
$("#contactform").fadeIn(1000);
$("#formSelectButtons").fadeIn(1000);
console.log(data);
});
} else {
$("#validationMessage").show();
}
};
$scope.reset = function () {
$scope.message = angular.copy($scope.master);
}
$scope.reset();
}