CODEWITHSUNDEEP
angularjsasp.net-mvc-4
user2412146
user2412146

Reputation: 103

Angularjs not working when using IE 9

I have an angularjs app, where I am using ng-app on div, and not the html.

The application works fine in IE>=10 and chrome,FF.

In IE 9, none of the ng- code is executed, breakpoint doesn't enter my custom angular scripts, and html shows {{}}.

It seems like angularjs is not getting bootstrapped.

I tried manually bootstrapping using

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

Doing this doesn't show the {{}} anymore, but no data is coming.

I am getting data using $http get like this

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

        });

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

            });

Upvotes: 0

Views: 760

Answers (1)

user2412146
user2412146

Reputation: 103

Adding the solution, if it can help someone.

The issue was creation of multiple body tags, one in the master page (_Layout) and other in the main page. The ng-app was applied to the main page body tag.

Since the html was not formed properly, angularjs was not bootstrapping correctly.

Changing the body tag on main page to div, and applying ng-app to div made it work fine in IE 9

Upvotes: 1

Related Questions