2014-05-12 3 views
10

에서 작동하지 않습니다와 나는 표정과 스타일 속성이 있습니다합니다 (각도 표현 (나는 그것이 오래된 알고있다) 나는 각도 1.0.6이 IE

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

그것은 잘 작동하지만 IE 용을 앱이> IE10에서 작동해야 함). 개발자 도구를 열면 style 속성이 없습니다. 사용자 정의 스타일 지시문을 만들려고했습니다. (Angular가 읽을 수 있기 전에 IE가 잘못된 속성을 제거했기 때문에)이 간단한 코드를 사용하면 내 케이스 항목에 jquery (google chrome에서 테스트 됨)에서 오류 TypeError: Cannot read property 'replace' of undefined이 발생했습니다. .color는 null 일 수 있습니다.

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

어떻게 작동시킬 수 있습니까? 나는 ngStyle가 있다는 것을 알고 있지만, 나는 그것이 필요한 것이 아닙니다.

+0

당신이 plunker 또는 jsfiddle을 만들 수 있습니다, 내가 좋겠 브라우저에서 보길 좋아합니다. – SoluableNonagon

+0

.css() 읽기를 사용하려면 .css (propertyName)이 필요하고 element.css (propertyName, newValue)가 필요합니다. – SoluableNonagon

+0

@EliteOctagon을 설정하는 대신 읽기를 시도하는 것 같습니다. 객체와 함께 CSS를 사용할 수도 있습니다. 나는 $ eval을 사용하여 객체를 파싱하고 생성하고 싶었다. 어쩌면 JSON'{color : item.color} '을 속성 값으로 사용해야합니다. – jcubic

답변

16

좋아, 그래서 오늘까지 기다려야했다 지난 밤 IE에서이 작업을 테스트 할 수 있습니다,이 시도하지만 난 완전히 당신의

<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는 내부에서 {{}} 바인딩으로 스타일 속성을 겉으로보기에는 좋아하지 않으므로 DOM에서 삭제합니다. 나는이 문제가 https://github.com/angular/angular.js/issues/2186이라는 것을 알았고 주어진 수정과 함께 plunkr가있다.

+0

작동하지 않습니다.'TypeError : 정의되지 않은 'exp'속성을 읽을 수 없습니다. ' – jcubic

+0

추가 정보'color : {{item.color | contrastColor}}'ng-style을 사용하는 동안 구문 분석 오류를 반환합니다. – jcubic

+0

contrastColor로 필터링하려고합니까? – johnnty

2

IE 브라우저가 style 특성으로 구문을 구문 분석 할 수 없으므로 style 대신 ng-style을 사용해야이 문제를 해결할 수 있습니다.

3

내게는 style에서 ng-attr-style으로 변경되었습니다. IE 및 Chrome에서 테스트되었습니다. 희망이 다른 사람을 도와줍니다.

당신은이 같은 {{ }}를 사용할 수 있습니다 겨-ATTR-스타일을 위해 문제를 해결하고 모든 브라우저에서 잘 작동 스타일을 변경

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

관련 문제