Question

我有一个适用于所有真实浏览器的angularjs应用程序。问题出在Internet Explorer 10上。

我在应用程序中做了很多这样的事情

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

虽然这在firefox，safari和chrome上运行良好，但它根本无法与Internet Explorer一起使用。

为了说明问题，我创建了一个jsfiddle：http://jsfiddle.net/U3pVM/3328/尝试使用chrome和Internet Explorer。 Chrome中的字体大小为30，但不在IE中。

如果有人能告诉我为什么会出现这种情况，除了重新实现整个事情之外还有什么可以做的事情，我会很高兴。

即使我重新实现应用程序在样式属性中没有双花括号，ng-src仍然需要花括号。

Answer 1

我最终使用ng-style这样解决了这个问题：

标记：

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

角：

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

ng-style要求一个对象具有一个键作为CSS样式名称，值作为相应样式的值。这适用于所有浏览器。

Answer 2

我建议你改变AngularJS的双括号并检查它。它将与其他字符一起使用，例如{[{data.font_size}]}/为了使它们可行，您需要在Angular模块中声明它们，如：

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

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

还检查您的角度代码是否初始化。您可以将所有角度代码放在

下面的块中

(function(){
//ALL AANGULAR CODE

})();

Answer 3

您也可以在ng-style中设置范围变量，如下所示：

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

确保您的data.font_size具有＆＃34; px＆＃34;附加到它。

AngularJS和Internet Explorer 10：没有发生卷曲替换

3 个答案: