Why my angular.js application doesn't work on ie7?

Question

I created an angular.js application which now needs to work in IE 7 and more. My application works correctly on other browsers.

I have been trying to insert id="ng-app", xmlns:ng, boot angular manually with angular.bootstrap(document, ['myApp']), include json3.js, ... Nothing works for me.

I'm trying to insert some data on my html to view if angular is parsing my document, but not ...

It's interesting to know that my route seem to work ( in my app, you need to be loggued to access other page, and if i'm trying to go on domain.ext/#/myRoute , I'm correctly redirected to domain.ext/#/ )

This is my actual index.html ( {{toto}} isn't parsed and my ng-view is always blank ):

<!DOCTYPE html>
<!--[if IE 8]>         <html class="no-js lt-ie9" lang="en" xmlns:ng="http://angularjs.org"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en" xmlns:ng="http://angularjs.org"> <!--<![endif]-->
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>My Title</title>

    <link rel="stylesheet" href="css/normalize.css" />
    <link rel="stylesheet" href="css/foundation.css" />
    <link rel="stylesheet" href="css/style.css" />

    <!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.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]-->
    <!--<script src="js/vendor/json3.min.js"></script>-->
  </head>
  <body class="ng-app:myApp" id="ng-app">
    <div ng-app="myApp">
    <nav class="top-bar" ng-controller="MainCtrl">
      {{toto}}
      <!-- some html with some ng-show and ng-hide -->
    </nav>

    <div>
      <div ng-view="ng-view"></div>
    </div>

    <script src="js/vendor/custom.modernizr.js"></script>
    <script src="js/vendor/jquery.js"></script>
    <script src="js/vendor/jquery-ui-1.10.3.custom.min.js"></script>
    <script src="js/vendor/angular.js"></script>
    <script src="js/vendor/angular.cookies.js"></script>
    <script src="js/vendor/angular.upload.js"></script>

    <script src="js/app/main.js"></script>
    <script src="js/app/articles.js"></script>
    <script src="js/app/medias.js"></script>
    <script src="js/app/categories.js"></script>
    <script src="js/app/users.js"></script>
    <script src="js/app/keywords.js"></script>

    <script src="js/foundation.min.js"></script>
    <!--
    <script src="js/foundation/foundation.js"></script>
    <script src="js/foundation/foundation.alerts.js"></script>
    <script src="js/foundation/foundation.clearing.js"></script>
    <script src="js/foundation/foundation.cookie.js"></script>
    <script src="js/foundation/foundation.dropdown.js"></script>
    <script src="js/foundation/foundation.forms.js"></script>
    <script src="js/foundation/foundation.joyride.js"></script>
    <script src="js/foundation/foundation.magellan.js"></script>
    <script src="js/foundation/foundation.orbit.js"></script>
    <script src="js/foundation/foundation.placeholder.js"></script>
    <script src="js/foundation/foundation.reveal.js"></script>
    <script src="js/foundation/foundation.section.js"></script>
    <script src="js/foundation/foundation.tooltips.js"></script>
    <script src="js/foundation/foundation.topbar.js"></script>
    -->
    <script>
      $(document).foundation();
    </script>
    </div>
  </body>
</html>

Sorry if my english is so bad,

Thanks for your help

Jerome

Maybe because of custom html attrs like "ng-view"? – karaxuna May 16 '13 at 10:17 — karaxuna, May 16 '13 at 10:17
and so, by what i will replace it ? – user2389427 May 16 '13 at 10:57 — user2389427, May 16 '13 at 10:57
What version of angularjs are you using? Production stable? – Fourth Jun 12 '13 at 03:24 — Fourth, Jun 12 '13 at 03:24

score 3 · Answer 1 · edited May 23 '17 at 10:27

3

The solution provided in this related question will be of help:

Why my angular.js application doesn't work on ie7?

3 Answers3