biểu kiễu góc bên trong thuộc tính phong cách không làm việc trong IE

Question

Tôi có 1.0.6 góc (Tôi biết đó là cũ) và tôi có thuộc tính phong cách với các biểu thức:

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

Nó hoạt động tốt nhưng không phải cho IE (The ứng dụng cần phải làm việc cho> IE10). Khi tôi mở công cụ Nhà phát triển, thuộc tính kiểu dáng không có. Tôi đã cố gắng tạo chỉ thị phong cách tùy chỉnh (vì tôi nghĩ rằng IE loại bỏ thuộc tính không hợp lệ trước khi Angular có thể đọc nó) nhưng với mã đơn giản này, tôi đã gặp lỗi TypeError: Cannot read property 'replace' of undefined từ jquery (được kiểm tra trên google chrome) vì trong trường hợp của tôi .color có thể là null

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

Tôi làm cách nào để nó hoạt động. Tôi biết rằng có ngStyle nhưng nó không hoàn toàn là những gì tôi cần.

Answer 1

Ok, hãy thử điều này, nhưng tôi không chắc chắn nếu tôi hoàn toàn hiểu những gì bạn đang cố gắng làm

<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> 

Chỉnh sửa html, không thể kiểm tra điều này trên IE đêm qua nên phải đợi đến ngày hôm nay. IE dường như không thích thuộc tính style với {{}} ràng buộc bên trong để nó xóa nó khỏi DOM. Tôi tìm thấy vấn đề này https://github.com/angular/angular.js/issues/2186 và có một plunkr với sửa chữa nhất định.

Answer 2

Trình duyệt IE không thể phân tích biểu thức góc với thuộc tính style vì vậy Bạn nên sử dụng ng-style thay vì style để giải quyết vấn đề này.

Answer 3

Đối với tôi, thay đổi style thành ng-attr-style đã giải quyết được sự cố. Đã thử nghiệm trong IE và Chrome. Hy vọng điều này sẽ giúp người khác.

Bạn có thể sử dụng {{ }} như thế này:

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

Answer 4

thay đổi phong cách để ng-attr kiểu giải quyết vấn đề và hoạt động tốt trong tất cả các trình duyệt