html - reloadwithdebuginfo - angularjs build prod

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

Question

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

<div ng-repeat="item in items" style="left:{{position($index)}}%"></div>

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 Fiddle para demostrar

¿Alguien tiene sugerencias sobre cómo rectificar?

Answer 1

Debe usar ng-style 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.

<div ng-repeat="item in items" ng-style="{left: position($index) + ''%''}"></div>

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.

 <div ng-repeat="item in items" ng-style="{left: position($index)}">{{item}}</div>

y volver

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

Demo

Answer 2

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

HTML:

<div ng-style="{''display'':showInfo?''block'':''none''}">
</div>

Answer 3

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

<div ng-app="app">
    <div ng-controller="controller">

        <div style="background:{{bgColor}}">
            This will NOT get colored in IE
        </div>

        <div ng-attr-style="background:{{bgColor}}">
            But this WILL get colored in IE
        </div>

        <div ng-style="styleObject">
            And so is this... as this uses a json object and gives that to ng-style
        </div>

    </div>
</div>

EL JS

var app = angular.module(''app'', []);

app.controller(''controller'', function($scope) {

    $scope.bgColor = "yellow";        
    $scope.styleObject = {"background": "yellow"};
});