La manipulación de estilo en línea con angular no funciona en IE

Quería establecer la posición de un div basado en el valor de retorno de una función en un controlador angular

Lo siguiente funciona bien en FireFox y en Chrome, pero en Internet Explorer {{position($index)}}% se interpreta como un valor de cadena literal y, por lo tanto, no tiene ningún efecto

 

Aquí hay un ejemplo del problema:

 var app = angular.module('app', []); app.controller('controller', function($scope) { $scope.items=[1,2,3,4,5,6,7,8,9,10]; $scope.position=function(i){ var percent =[5,10,15,20,25,30,35,40,45,50,55,60,65,70]; return percent[i+1]; } }); 

Y aquí hay un violín para demostrar

¿Alguien tiene sugerencias sobre cómo rectificar?

Debe usar ng-style en lugar de estilo, de lo contrario, algunos navegadores como IE eliminarán los valores de atributo de estilo no válidos (la presencia de {{}} etc. lo invalida) incluso antes de que angular tenga la posibilidad de representarlo. Cuando use ng-style angular calculará la expresión y le agregará los atributos de estilo en línea.

 

Como de todos modos está calculando la posición, también podría agregar % de la position y enviarla. Recuerde también que invocar una función en ng-repeat invocará la función en cada ciclo de resumen, por lo que le recomendamos que tenga cuidado de no realizar demasiadas operaciones intensivas dentro del método.

  
{{item}}

y volver

  return percent[i+1] + "%"; 

Manifestación

Si desea utilizar la expresión de enlace angular {{}} al igual que el atributo de estilo normal como style="width:{{someScopeVar}}" , use ng-attr-style y funcionará perfectamente IE (y obviamente otros más inteligentes): )

comprueba mi jsFiddle … Comprobado con Angular JS 1.4.8

Aquí he mostrado el uso de style , ng-style y ng-attr-style

EL HTML

 
This will NOT get colored in IE
But this WILL get colored in IE
And so is this... as this uses a json object and gives that to ng-style

EL JS

 var app = angular.module('app', []); app.controller('controller', function($scope) { $scope.bgColor = "yellow"; $scope.styleObject = {"background": "yellow"}; }); 

Sí, ng-style funcionará para resolver este problema. Puede usar el estilo condicionalmente usando el ternary operator .

HTML: