Angular JS does not render view in IE 8

Question

Internet explorer 8 seems to hate the Angular.js used in my contact form, and I am not sure how to debug. Using emulation mode in IE 11 shows that the view is not rendered, but the console doesn't seem to report any errors. Is there something obvious I have overlooked, or is there a better method of troubleshooting the problem?

Here is 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();
}

JeffryHouser · Accepted Answer · 2014-04-17 20:35:42Z

1

Based on these instructions, I'd try adding id="ng-app" to the root element:

<html class="no-js" lang="en" dir="ltr" ng-app="contactApp" id="ng-app">

Based on a quick code review; I think that is the only item which you are missing.

answered Apr 17, 2014 at 20:35

JeffryHouser

39.4k4 gold badges41 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

drewwyatt Over a year ago

Nice catch! still doesn't seem to want to work though... I'm digging through the documentation you linked me to though.

JeffryHouser Over a year ago

I hope the doc helps. Good luck!

drewwyatt Over a year ago

It works today - I'm guessing something was cached yesterday. Thanks for your help!

Krishan · Accepted Answer · 2014-04-18 04:35:50Z

1

Add This Line

<html xmlns:ng="http://angularjs.org">

can you please put the Console Error

answered Apr 18, 2014 at 4:35

Krishan

2,4976 gold badges37 silver badges48 bronze badges

2 Comments

drewwyatt Over a year ago

Part of my problem is that IE11 (emulating IE8) isn't throwing any console errors. Any ideas on how I can find the errors?

drewwyatt Over a year ago

When I revisited this today, it worked. I think something may have been cached yesterday. I still added this though - I see now where it was referenced in the docs.

Collectives™ on Stack Overflow

Angular JS does not render view in IE 8

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related