AngularJS and internet explorer 10: Curly braces s

Question

I have an angularjs app which works on all real browsers. The problem is with internet explorer 10.

I have done a lot of stuff like this in the app

<div style="font-size: {{data.font_size}}px"></div>

While this works fine on firefox, safari and chrome, it simply does not work with internet explorer.

To illustrate the problem I have created a jsfiddle: http://jsfiddle.net/U3pVM/3328/ Try it with chrome and internet explorer. Font size is 30 in chrome but is not in IE.

I would be glad if someone could tell me why that would be the case and if there is anything I can do other than reimplement the whole thing.

Even if I were reimplement the app to have no double curly braces in style attribute, ng-src still needs to have curly braces.

Answer 1

You can also set the scope variable inside ng-style, like this:

<div ng-style="{font-size: data.font_size}"></div>

Make sure your data.font_size has "px" appended to it.

Answer 2

I would suggest you to change double braces that comes form AngularJS and check it. It will work with other characters such as {[{data.font_size}]}/ To make them workable you need to declare them in Angular module like:

ModuleApp = angular.module('ModuleApp', []);

    ModuleApp.config(function($interpolateProvider) {
      $interpolateProvider.startSymbol('{[{');
      $interpolateProvider.endSymbol('}]}');
    });

also check that if your angular code gets initializes. You can put all angular code in block below

(function(){
//ALL AANGULAR CODE

})();

Answer 3

I ended up solving this problem by using ng-style like this:

Markup:

<div custom-directive ng-style="setWidth()"></div>

Angular:

link: function(scope, elem, attrs) {
  scope.setWidth = function() {
    return { "width": "200px" }
  }
}

ng-style expects an object which has a key as the CSS style name and the value as the value for the corresponding style. This works in all browsers.