Question

我有一个angularjs应用程序，我在div上使用ng-app，而不是html。

应用程序在IE＆gt; = 10和chrome，FF中正常工作。

在IE 9中，没有执行任何ng代码，断点不输入我的自定义角度脚本，html显示{{}}。

似乎angularjs没有被引导。

我尝试使用

手动引导

＆＃13;

  
$(document).ready(function () {
        angular.element(document).ready(function () {
                        angular.bootstrap(document.getElementById("HomeGrid"), ['ngGridApp']);

＆＃13;

执行此操作不再显示{{}}，但不会有数据出现。

我使用$ http获取数据就像这样

＆＃13;

 var User = $("#UserID").text();
        $http({
            method: 'POST',
            url: '/Home/GetData/',
            data: { UserName: $("#UserID").text() }
        }).success(function (data) {
            $scope.GridData = angular.fromJson(data);

        });

＆＃13;

Angularjs 1.3.2

_Layout.cshtml

   <!DOCTYPE html>
<html lang="en" xmlns:ng="http://angularjs.org" >
<head>
    <meta charset="utf-8" />
    <title></title>
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <meta name="viewport" content="width=device-width" />

    <!--[if lte IE 9]>
    <script src="xdomain.js" slave="http://example.org/proxy.html"></script>
    <![endif]-->

    @Scripts.Render("~/bundles/Angular")
    @Scripts.Render("~/bundles/modernizr")
    @Styles.Render("~/Angular/css")

    <script src="~/Scripts/jquery-ui-1.10.4.custom.min.js"></script>
    <script type="text/javascript">
        $.ajaxSetup(
            {
                cache: false
            });
        $(document).ready(function () {

            $(".openPopup").live("click", function (e) {
                e.preventDefault();

                $("#PopUp").addClass("dialog")
                    .attr("id", $(this)
                    .attr("data-dialog-id"))
                    .appendTo("body")
                    .dialog({
                        title: $(this)
                            .attr("data-dialog-title"), close: function () {
                                //$(this).remove();
                            }, modal: true, height: 400, width: 900
                    }).load(this.href);
            });
            $(".close").live("click", function (e) {

                $(this).closest(".dialog")
                    .dialog("close");
                window.location.reload();
            });
        });
    </script>

</head>
<body>
    <nav class="navbar navbar-default navbar-static-top">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a href="~/Home/Index" class="navbar-logo">
                    <img src="@Url.Content("~/Images/xs.png")">
                    <span>BillPrep</span>
                </a>
            </div>

            <!-- Collection of nav links and other content for toggling -->
            <div id="navbar" class="navbar-collapse collapse">
                <ul class="nav navbar-nav"></ul>
                <ul class="nav navbar-nav navbar-right">
                    <li class="dropdown">
                        <a id="dLabel" role="button" data-toggle="dropdown" aria-expanded="false" class="dropdown-toggle" data-target="#" href="#">
                            <strong>@Html.Action("LoginDisplay", "Home", new { Name = User.Identity.Name })</strong> <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="#">User Settings</a></li>
                            <li><a href="#">System Settings</a></li>
                            <li>@Html.ActionLink("Sign Out", "Logout", "Home")</li>
                        </ul>
                </ul>
            </div>
        </div>
    </nav>

    <div>
        @RenderSection("featured", required: false)
        @RenderBody()
    </div>

Homepage.cshtml

<script src="~/Scripts/angularjs/stacktrace.js"></script>
<script type="text/javascript">

    $(document).ready(function () {
        angular.element(document).ready(function () {
                        angular.bootstrap(document.getElementById("HomeGrid"), ['ngGridApp']);
           // angular.bootstrap(document.getElementById("tabgrid"));
        });
    });
</script>
<div>
<body  ng-controller="ngGridController" id="HomeGrid">
    <style>
        #myTabs div li.active a {
            background-color: lightsteelblue;
        }

        .gridStyle {
            border: 1px solid rgb(212,212,212);
            width: 400px;
        }

        .bold {
            color: black;
            font-weight: bold;
        }
    </style>
    <div ng-controller="TabsDemoCtrl" data-ng-init="init()" id="tabgrid">


        <div id="UserID" ng-show="false">{{User}}</div>
        <loading></loading>
        <br />
        <tabset ng-show="{{show1}}">
            <tab id="Inbox" active="isFirstActive">
                <tab-heading>
                    <span class="glyphicon glyphicon-inbox" aria-hidden="true"></span>
                   Inbox
                </tab-heading>
                <div class="ngGridStyle" ng-grid="ngGridViewInbox"></div>
            </tab>
            <tab id="pending" active="isSecondActive">
                <tab-heading>
                    <span class="glyphicon glyphicon-folder-open" aria-hidden="true"></span>
                   show2
                </tab-heading>
                <div class="ngGridStyle" ng-grid="ngGridView2" ng-show={{show2}}></div>
            </tab>

js file

var app = angular.module('ngGridApp', ['ngGrid', 'ui.bootstrap', 'logToServer'])
.directive('loading', function () {
    return {
        restrict: 'E',
        replace: true,
        template: '<div class="loading"><img src="http://www.mytreedb.com/uploads/mytreedb/loader/ajax_loader_blue_512.gif" width="20" height="20" />LOADING...</div>',
        link: function (scope, element, attr) {
            scope.$watch('loading', function (val) {
                if (val)
                    $(element).show();
                else
                    $(element).hide();
            });
        }
    }
})

TabsDemoCtrl.$inject = ["$scope", "$window"];
angular.module('ngGridApp').controller('TabsDemoCtrl', TabsDemoCtrl);

function TabsDemoCtrl($scope, $window) { $scope.User = ""; }

ngGridController.$inject = ["$scope", "$http", "$interval"];

app.controller('ngGridController', ngGridController);

function ngGridController($scope, $http, $interval) {
    $scope.callAtInterval = function () {
        var User = $("#UserID").text();
        $http({
                method: 'POST',
                url: '/Home/GetData/',
                data: { UserName: $("#UserID").text() }
            }).success(function (data) {
                $scope.GridData = angular.fromJson(data);

            });

Answer 1

添加解决方案，如果它可以帮助某人。

问题是创建了多个body标签，一个在主页面中（_Layout），另一个在主页面中。 ng-app已应用于主要页面正文标记。

由于html格式不正确，因此angularjs无法正确引导。

将主页上的body标签更改为div，并将ng-app应用于div使其在IE 9中正常工作

Angularjs在使用IE 9时无法正常工作

1 个答案: