18

Just to make sure if AngularJS works on the browsers I need, I made a simple data-binging demo that works fine on Firefox, Chrome an IE8+ but I also need to make it work on IE7. Unfortunatelly I can't make it work on it. It only shows the html with the curly braces on it, ignoring ng- attributes.

I have checked several posts about AngularJS on Internet Explorer and tried the suggested fixes on each one but nothing works on my demo.

This is the HTML of my demo:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Angular IE7 Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<!--[if lt IE 9]>
<script type="text/javascript" src="angularjs/html5shiv.js"></script>
<![endif]-->
<!--[if lt IE 8]>
<script type="text/javascript" src="angularjs/json3.js"></script>
<![endif]-->
<script language="JavaScript" src="angularjs/angular.min.js"></script>
<script language="JavaScript" src="angularjs/test.js"></script>
</head>
<body class="ng-app">
    <div ng-controller="serversCtrl">
        <p>{{texto}}</p>

        <table border="1">
            <tbody>
                <tr><th>Col1</th><th>Col2</th><th>Col3</th></tr>
                <tr ng-repeat="item in items"><td>{{item.col1}}</td><td>{{item.col2}}</td><td>{{item.col3}}</td></tr>
            </tbody>
        </table>
    </div>
</body>
</html>

And this is the test.js javascript containing the controller and the models:

function serversCtrl($scope, $http, $location) {
    $scope.texto = "Texto dinamico";
    $scope.items = [
        {col1: "foo1", col2: "bar1", col3: "baz1"},
        {col1: "foo2", col2: "bar2", col3: "baz2"},
        {col1: "foo3", col2: "bar3", col3: "baz3"},
        {col1: "foo4", col2: "bar4", col3: "baz4"},
        {col1: "foo5", col2: "bar5", col3: "baz5"}
    ];
}

Am I doing something wrong? Is there any other tip to make it work that I have missed?

EDIT: I'm using AngularJS v1.0.5

0

2 Answers 2

62

1) Add id="ng-app" to your body tag.

<body ng-app="myApp" id="ng-app">

  2) Inform your users/client it's 2013.

7
  • Actually I also tried with id="ng-app" as an alternative to class="ng-app" but none of them solved my problem. In my country (El Salvador) people still use Windows XP and Internet Explorer 6 and 7 unfortunatelly but we aree in the process of convincing them to upgrade. Thanks for your answer. Commented Apr 10, 2013 at 15:24
  • id="ng-app" is not meant as alternative. Both are needed, ng-app="myApp"and id="ng-app".
    – Stewie
    Commented Apr 10, 2013 at 17:05
  • @RobertoLinares - I thought they used nothing but Linux and Firefox outside of the USA. ;-) Commented Sep 13, 2013 at 18:37
  • 1
    @AdamNofsinger According to the user agent logs on my site, there's still plenty of users here using IE6 and 7, specially goverment/big companies users. Commented Oct 21, 2013 at 14:53
  • The latest release of Angular-seed has <html lang="en" ng-app="myApp"> would that be ok on its own?
    – JGallardo
    Commented Dec 21, 2013 at 0:58
19

After some more reading I could make it work.

The problem with IE7 was the bootstrapping. It was not firing any! so I made a manual initialization as shown in this page and it worked.

This is the code I added to the HTML assuring it will only fire on Internet Explorer 8 or lower (because if I fire it for all browsers some event handlers fire twice for non-ie browsers):

<!--[if lte IE 8]>
<script type="text/javascript">
    $(document).ready(function() {
        angular.bootstrap(document);
    });
</script>
<![endif]-->

The $document.ready() part is the jQuery way to be sure this code will be executed when everything on the body has been loaded but since I was using jQuery on my site I took advantage of it.

1
  • 3
    Could you please show me a JSFiddle or Plnkr example? I can't get his working and I would really appreciate a working example.
    – K-Dawg
    Commented Jan 28, 2015 at 12:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.