2015-01-14 5 views
1

저는 AngularJS 1.2.22를 실행 중이며 IE9와 필자가 작성한 사용자 정의 필터에 문제가있는 것 같습니다. 그것은 크롬과 파이어 폭스에서 잘 작동하지만 물론, 정말로 필요한 브라우저가 아닙니다.IE9에서 angularjs 필터가 실행되지 않습니다.

<i> 태그에는 두 개의 필터가 있습니다. 하나는 멋진 글꼴 이름을 반환하고 다른 하나는 색상 스타일을 제공하기위한 것입니다. 문제는 하나의 필터가 나에게 아이콘 이름을 제공하는 괜찮은 것인데, 다른 하나는 필터를 통해 색상을 제공한다는 것입니다. 나는 파이어 폭스와 IE에 개발 도구를 열 때

app.filter('statusIcon', function() { 
    return function(item) { 
     switch (item) { 
     case 'Y': 
      return "fa-exclamation-circle"; 
     case 'R': 
      return "fa-exclamation-triangle"; 
     case 'G': 
      return "fa-check-circle"; 
     default: 
      return ""; 
     } 
    }; 
}); 

app.filter('statusIconColor', function() { 
    return function(item) { 
     switch (item) { 
     case 'Y': 
      return "#B2B200"; 
     case 'R': 
      return "red"; 
     case 'G': 
      return "green"; 
     default: 
      return "green"; 
     } 
    }; 
}); 

, 나는 파이어 폭스에서 제대로 렌더링 '컬러'스타일을 볼 수 있지만 :

은 여기 내 HTML

<td> 
    <i tooltip="{{d.Validation}}" class='fa {{d.StatusIndicator | statusIcon}}' 
     style="color: {{d.StatusIndicator | statusIconColor}}; font-size: 1.25em;"></i> 
</td> 

그리고 내 필터 소스입니다 IE에는 '색상'스타일이 전혀 없습니다. 파이어 폭스의 'statusIconColor'필터에서 브레이크 포인트 히트를 보았지만 IE에서는 필터가 Internet Explorer에서 호출되지 않는다고 생각하게되었습니다.

'statusIcon'필터의 중단 점은 두 브라우저에서 모두 발생하지만 'statusIconColor'에서는 중단되지 않습니다. 위어드!

콘솔 오류 메시지가 없습니다.

나는 조언을 주시면 감사하겠습니다. Corey. 이 목적을 위해 필터를

ng-attr-style="color: {{d.StatusIndicator | statusIconColor}}; font-size: 1.25em;" 

그러나 내가 더 잘 ngStyle을 사용하고 피 : 당신이 ngAttrStyle 지시어를 사용해야하는 경우

+1

[ng-style] (https://docs.angularjs.org/api/ng/directive/ngStyle) 및 [ng-class] (https://docs.angularjs.org/api)를 시도해보십시오./ng/directive/ngClass) 지시어를'style'과'class' 속성 대신에 사용할 수 있습니까? – jukempff

답변

1

이 정확히 경우입니다. 대신 컨트롤러 기능을 사용할 수 있습니다.

분명히 IE 스타일은 color: {{d.StatusIndicator | statusIconColor}}; font-size: 1.25em; 그대로 적용되므로 ngAttrStyle 지시문은 보간 된 후에 만 ​​style 속성을 설정합니다.

+0

굉장합니다. 감사! – cardinalPilot

+0

이것은 굉장한 것처럼 들리지만 지시어는 실제로 실제로 존재합니까? https://docs.angularjs.org에서 문서를 찾을 수없는 것 같습니다. 시도 할 때 작동하지 않습니다 ... (각도 1.2.28) –

+0

@PerQuestedAronsson 예, 물론 : https : //docs.angularjs.org/guide/directive#-ngattr-attribute-bindings, Angular 1.2.x에서 사용할 수 있습니다. – dfsq

관련 문제