AngularJs templates not loading in internet explorer 8

Hilaal Agil

unread,

Aug 24, 2013, 4:02:45 PM8/24/13

to ang...@googlegroups.com

i am not able to render AngularJs templates in Internet Explorer 8, i have followed several suggestions for using AngularJs in Internet Explorer but am still not able to get it to work. below is my html code for the page including the scripts i have used, is it possible to point out if i am using anything that could make the code not work in Internet Explorer? i can upload details of other files if anybody would like to know the details of it. everything works perfectly on all other browsers but just Internet Explorer. thank you for your time.

<!doctype html>

        <!-- build:css({.tmp,app}) styles/main.css -->
        <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
        <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
        <link rel="stylesheet" href="styles/main.css">
        <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,400,300,600,700' rel='stylesheet' type='text/css'>
        <style>
            @-moz-document url-prefix() {
                    .filter-menu .btn {
                        padding: 0;
                    }
                }
        </style>
        <!-- endbuild -->
        <script src="bower_components/modernizr/modernizr.js"></script>

        <!--[if lte IE 8]> <script src="scripts/angular-ui-ieshiv.js"></script><![endif]-->

        <!--[if lte IE 8]>
            <script>
                document.createElement('ng-include');
                document.createElement('ng-pluralize');
                document.createElement('ng-view');

                // Optionally these for CSS
                document.createElement('ng:include');
                document.createElement('ng:pluralize');
                document.createElement('ng:view');
            </script>
        <![endif]-->

        <!--[if lt IE 7]>
            <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE7.js"></script>
        <![endif]-->
        <!--[if lt IE 8]>
            <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE8.js"></script>
        <![endif]-->
        <!--[if lt IE 9]>
            <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
        <![endif]-->
        <!-- <script src="bower_components/less/dist/less-1.4.2.min.js"></script> -->   
</head>
<body>
    <!--[if lt IE 8]>
      <p class="chromeframe">You are using an outdated browser. <a href="http://browsehappy.com/">Upgrade your browser today</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to better experience this site.</p>
    <![endif]-->

    <!--[if lt IE 9]>
      <script src="bower_components/es5-shim/es5-shim.js"></script>
      <script src="bower_components/json3/lib/json3.min.js"></script>
    <![endif]-->

    <!-- Add your site or application content here -->
    <aside id="sidebar">
        <ul class="list-unstyled">
            <li><a href="#/hotels" prevent><span class="icon-briefcase icon-2x"></span></a></li>
            <li><a href="#/restaurants" prevent><span class="icon-food icon-2x"></span></a></li>
            <li><a href="#/cafe" prevent><span class="icon-coffee icon-2x"></span></a></li>
        </ul>
    </aside>
    <section id="topbar">
        <ul class="list-unstyled">
            <li><span class="icon-briefcase icon-2x"></span></li>
        </ul>
    </section>

    <section id="main-container">
        <section ui-view id="main-inner-container"></section>
    </section>

    <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
    <script>
      var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
      (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
      g.src='//www.google-analytics.com/ga.js';
      s.parentNode.insertBefore(g,s)}(document,'script'));
    </script>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="bower_components/jquery-easing/jquery.easing.min.js"></script>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
    <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.5.0.js"></script>
    <script src="bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
    <script src="http://code.angularjs.org/1.0.3/angular-resource.min.js"></script>
    <script src="bower_components/angular-animate/angular-animate.min.js"></script>
    <script src="bower_components/angular-promise-tracker/promise-tracker.min.js"></script>
    <script src="scripts/app.js"></script>
    <script src="scripts/services.js"></script>
    <script src="scripts/directives.js"></script>
    <script src="scripts/controllers/hotelsController.js"></script>
    <script src="scripts/controllers/restaurantsController.js"></script>

    <script src="bower_components/masonry/masonry.js"></script>

    <!-- build:js({.tmp,app}) scripts/scripts.js -->
    <!-- endbuild -->
</body>

Sanjay Pandya

unread,

Aug 24, 2013, 8:00:31 PM8/24/13

to ang...@googlegroups.com

look @ this link ...it may help you http://docs.angularjs.org/guide/ie

max.f...@gmail.com

unread,

Aug 30, 2013, 6:01:18 AM8/30/13

to ang...@googlegroups.com

I was having the same issue and cannot explain what is going wrong.

Anyways.. this workaround fixed it for me.

In my main controller, which is only loaded once at the beginning, I added this code to reload the initial route.

$timeout(function(){

$route.reload();

}, 1);

HTH

周岑

unread,

Nov 18, 2013, 4:25:47 AM11/18/13

to ang...@googlegroups.com

i have the same problem. did you have solved this problem? thank you for your time.

在 2013年8月25日星期日UTC+8上午4时02分45秒，Hilaal Agil写道：

Reply all

Reply to author

Forward