Angular JS Directive not rendering inline style in IE9

Question

I have a directive that is working fine in Chrome, but in IE9 it renders '{{myappInitials.IconColor}' into the HTML:

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

The directive:

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

There is a Plunker here to check.

Is this an Angular bug?

I cant really test this on IE9 but Have you tried using ng-class ? — haki
– haki, Commented May 18, 2014 at 8:10
It doesn't make any difference changing the style tag to ng-style in this example. — Holland Risley
– Holland Risley, Commented May 18, 2014 at 16:47

Holland Risley · Accepted Answer · 2014-05-19 09:04:16Z

IE (including 11) does not support interpolation in style attributes. You must use ngStyle for that, e.g ng-style="{'background-color': myAppInitials.IconColor}"

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

This is my working solution, though I'd prefer to include the ng-style element within the template of the directive but I am not yet sure whether this is possible:

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

The directive:

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

Collectives™ on Stack Overflow

Angular JS Directive not rendering inline style in IE9

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related