javascript - support - Ejecutando la aplicación AngularJS en Internet Explorer 7
angularjs internet explorer (2)
1) Agrega id="ng-app" a tu etiqueta de cuerpo.
<body ng-app="myApp" id="ng-app">
2) Informe a sus usuarios / cliente que es 2013.
Solo para asegurarme de que AngularJS funcione en los navegadores que necesito, hice una demostración simple de datos que funciona bien en Firefox, Chrome en IE8 + pero también necesito hacer que funcione en IE7. Desafortunadamente no puedo hacer que funcione. Solo muestra el html con las llaves en él, ignorando los atributos ng- .
He comprobado several posts about AngularJS en Internet Explorer y he probado las correcciones sugeridas en cada una, pero nada funciona en mi demostración.
Este es el HTML de mi 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>
Y este es el javascript test.js que contiene el controlador y los modelos:
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"}
];
}
¿Estoy haciendo algo mal? ¿Hay algún otro consejo para que funcione?
EDIT: estoy usando AngularJS v1.0.5
Después de un poco más de lectura, pude hacer que funcionara.
El problema con IE7 fue el bootstrapping. ¡No estaba disparando ninguno! Así que hice una inicialización manual como se muestra en esta página y funcionó.
Este es el código que agregué al HTML asegurando que solo se activará en Internet Explorer 8 o inferior (porque si lo hago para todos los navegadores, algunos manejadores de eventos se activan dos veces para los navegadores que no son):
<!--[if lte IE 8]>
<script type="text/javascript">
$(document).ready(function() {
angular.bootstrap(document);
});
</script>
<![endif]-->
La parte $document.ready() es la forma jQuery de asegurarse de que este código se ejecutará cuando se haya cargado todo el cuerpo, pero como estaba usando jQuery en mi sitio, lo aproveché.