Angular выражение внутри атрибута стиля не работает в IE

У меня есть angular 1.0.6 (я знаю его старый), и у меня есть атрибут стиля с выражениями:

<li style="background-color: {{item.color}}">
   <span style="color: {{item.color | contrastColor}}">{{item.label}}</span>
</li>

Он работает нормально, но не для IE (приложение должно работать для > IE10). Когда я открываю инструмент разработчика, атрибут стиля отсутствует. Я пытаюсь создать настраиваемую директиву стиля (потому что я решил, что IE удаляет недопустимый атрибут до того, как angular может его прочитать), но с помощью этого простого кода у меня есть ошибка TypeError: Cannot read property 'replace' of undefined из jquery (проверена на google chrome), потому что в моем случае item.color может быть null

.directive("logStyle", function() {
    // logStyle directive
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
           element.css(scope.$eval(attrs.logStyle));
        }
    };
});

Как я могу заставить его работать. Я знаю, что существует ngStyle, но это не совсем то, что мне нужно.

Ответ 1

Хорошо, попробуйте, но я не уверен, полностью ли понимаю, что вы пытаетесь сделать

<div ng-controller="appCtrl">
<ul>
    <li ng-repeat="item in items" ng-style="{'background-color': item.color}">
        <span ng-style="{ 'color': (item.color | contrastColor) }">{{ item.label }}</span>
    </li>
</ul>
</div>

Отредактировал html, не смог проверить это в IE прошлой ночью, поэтому пришлось подождать до сегодняшнего дня. IE, похоже, не любит атрибут стиля с {{}} связыванием внутри, поэтому он удаляет его из DOM. Я нашел эту проблему https://github.com/angular/angular.js/issues/2186 и есть plunkr с указанным исправлением.

Ответ 2

Для меня изменение style на ng-attr-style решило проблему. Протестировано в IE и Chrome. Надеюсь, это помогает кому-то другому.

Вы можете использовать {{ }} следующим образом:

ng-attr-style="color:{{entity.status | statusColor}};"

Ответ 3

IE-браузер не способен анализировать выражение angular с атрибутом style, поэтому для решения этой проблемы следует использовать ng-style вместо style.

Ответ 4

изменение стиля в ng-attr-стиле устраняет проблему и прекрасно работает во всех браузерах