AngularJS template variable not working/displaying in IE11

Question

I have a directive that displays a font box in an angularJS project. The block of code works fine in other browsers, but in IE (10, & 11), the template variable is not processed and "{{ currentFont }}" actually displays in the browser instead of the variable it represents.

I also added the currentFont variable to the div's class to see if that would process in IE11, and it worked fine. It's just the variable that is inside of the tag that is the problem.

I assume this is a common problem and easy to fix. Does anyone have any ideas?

<div id="fnt-select" class="select-box {{ currentFont }}" ng-class="{disabled: !selectedTextField}" ng-click="!selectedTextField || toggleSelect($event)">
  {{currentFont}}
</div>

Does it work in chrome / firefox? If so IE may be running in compatibility mode. Try adding <meta http-equiv="X-UA-Compatible" content="IE=Edge" /> in your head tag if that is the case. — amza
– amza, Commented Jul 30, 2015 at 17:06
yep the application works fine in chrome and FF. \Tthe head contains <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> — user1901469
– user1901469, Commented Jul 30, 2015 at 17:10

user1901469 · Accepted Answer · 2015-08-01 19:45:55Z

1

The answer was to use ng-bind

<div id="fnt-select" ng-bind="currentFont" class="select-box {{ currentFont }}" ng-class="{disabled: !selectedTextField}" ng-click="!selectedTextField ||     toggleSelect($event)"></div>

answered Aug 1, 2015 at 19:45

user1901469

1,2491 gold badge11 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJS template variable not working/displaying in IE11

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related