CODEWITHSUNDEEP
javascriptangularjsinternet-explorerinternet-explorer-8
drewwyatt
drewwyatt

Reputation: 6027

Angular JS does not render view in IE 8

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

Upvotes: 0

Views: 1281

Answers (2)

Krishan
Krishan

Reputation: 2487

Add This Line 

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

can you please put the Console Error

Upvotes: 1

JeffryHouser
JeffryHouser

Reputation: 39408

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.

Upvotes: 1

Related Questions