角JS指令不呈現內聯樣式在IE9

Question

我有一個是在Chrome中工作正常指令，但在IE9它呈現「{{} myappInitials.IconColor」到HTML：

<tr ng-repeat="person in data.people"> 
    <td class="text-left"> 
     <div myapp-initials="person" ></div> 
    </td> 
</tr> 

的指令：

angular.module('myapp.directives', []) 
    .directive('myappInitials', function() { 
     return { 
      restrict: 'A', 
      template: "<div style='background-color:{{myappInitials.IconColor}}' class='userIconMedium'>{{myappInitials.Firstname.charAt(0) + ' ' + myappInitials.Surname.charAt(0)}}</div>", 
      scope: { 
      myappInitials: "=" 
      } 
    }; 
}); 

有一個Plunker here檢查。

這是一個錯誤嗎？

Answer 1

IE（包括11）不支持樣式屬性的插值。您必須使用ngStyle爲，例如 NG風格=「{‘背景顏色’：myAppInitials.IconColor}」

https://docs.angularjs.org/guide/ie

這是我工作的解決方案，但我寧願包括NG該指令的模板內風格的元素，但我還不知道這是否是可能的：

<tr ng-repeat="person in data.people"> 
    <td class="text-left"> 
     <div ng-style="{'background-color':person.IconColor}" class="userIconMedium" myapp-initials="person"></div> 
    </td> 
</tr> 

的指令：

angular.module('myapp.directives', []) 
    .directive('myappInitials', function() { 
     return { 
      restrict: 'A', 
      template: "{{myappInitials.Firstname.charAt(0) + ' ' + myappInitials.Surname.charAt(0)}}", 
      scope: { 
      myappInitials: "=" 
      } 
}; 
});