Question

我有一个在Chrome中运行良好的指令，但在IE9中，它会呈现＆＃39; {{myappInitials.IconColor}＆＃39;进入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-style =＆＃34; {＆＃39; background-color＆＃39 ;: myAppInitials.IconColor}＆＃34;

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

这是我的工作解决方案，虽然我更喜欢在指令的模板中包含ng-style元素，但我还不确定这是否可行：

<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: "="
          }
};
 });

Angular JS Directive在IE9中不呈现内联样式

1 个答案: