CODEWITHSUNDEEP
javascripthtmlangularjsinternet-explorer-7
user2389427
user2389427

Reputation: 31

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

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

Upvotes: 3

Views: 9808

Answers (3)

johngeorgewright
johngeorgewright

Reputation: 1005

I started working on a module recently to help with the implementation of angular and IE7. There are many hurdles you have to take to try and get it working. Give it a try and see if it works out for you.

https://github.com/johngeorgewright/angular-ie7-support

Upvotes: 0

Scotty.NET
Scotty.NET

Reputation: 12560

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

Related IE7 and AngularJS SO Question

I have successfully used the same approach for IE7 as described there.

Upvotes: 3

Aeladru
Aeladru

Reputation: 341

I would suggest that you read this page http://docs.angularjs.org/guide/ie

Angular doesn't play well with IE7 by default.

Upvotes: 1

Related Questions