Question

Internet Explorer 8似乎讨厌我的联系表单中使用的Angular.js，我不知道如何调试。在IE 11中使用仿真模式显示视图未呈现，但控制台似乎没有报告任何错误。有没有明显的东西我忽略了，还是有更好的方法来排除问题？

这是（相关的）呈现的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>

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

Answer 1

根据these instructions，我会尝试在根元素中添加id =“ng-app”：

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

基于快速代码审查;我认为这是你唯一缺少的项目。

Answer 2

添加此行

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

你可以把控制台错误

Angular JS不在IE 8中呈现视图

2 个答案: