Menu
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
407
Internet Explorer 11 is a legacy browser and support for it in Angular 13 is being dropped officially.
Read this document if you are planning on deploying your AngularJS application on IE. The project currently supports and will attempt to fix bugs for IE9 and above. The continuous integration server runs all unit tests against IE9, IE10, and IE11.
What browsers does AngularJS work with? We run our extensive test suite against the following browsers: the latest versions of Chrome, Firefox, Safari, and Safari for iOS, as well as Internet Explorer versions 9-11. See Internet Explorer Compatibility for more details on supporting legacy IE browsers.
1) Add id="ng-app" to your body tag.
<body ng-app="myApp" id="ng-app">
2) Inform your users/client it's 2013.
131
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.
23
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With