AngularJS 和 Internet Explorer 10：大括号替换没有发生答案

【问题标题】：AngularJS and internet explorer 10: Curly braces substitution is not happeningAngularJS 和 Internet Explorer 10：大括号替换没有发生
【发布时间】：2017-03-18 00:49:53
【问题描述】：

我有一个适用于所有真实浏览器的 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 仍然需要有花括号。

【问题讨论】：

在这种情况下你应该使用 ng-class。 IE10 与 {{}} 存在许多问题
上面的东西只是一个例子，像ng-src之类的东西需要花括号。那我该怎么办？
不要使用插图，而是考虑用真实示例在 fiddle 或 jsbin 中重现您的问题
问题在jsfiddle中重现。你可以看到。我不需要输入我的实际代码
我在尝试使用带有样式属性的 {{}} 时遇到了同样的问题。我更改为 css 类，并使用 ng-class 应用它

标签： angularjs internet-explorer

【解决方案1】：

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

标记：

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

角度：

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

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

【讨论】：

【解决方案2】：

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

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

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

还要检查您的 Angular 代码是否已初始化。您可以将所有角度代码放在下面的块中

(function(){
//ALL AANGULAR CODE

})();

【讨论】：

【解决方案3】：

你也可以在 ng-style 中设置作用域变量，像这样：

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

确保您的 data.font_size 附加了“px”。

【讨论】：