如何防止 AngularJS 制作小写 HTML 属性答案

【问题标题】：How to prevent AngularJS from making lowercase HTML attributes如何防止 AngularJS 制作小写 HTML 属性
【发布时间】：2013-01-13 16:59:03
【问题描述】：

我正在尝试使用 AngularJS 渲染一些 SVG，但我无法动态更改 svg 元素的视图框。

Angular 呈现一个“viewbox”属性，但浏览器需要一个“viewBox”属性。所以结果是：

<svg height="151px" width="1366px" viewBox="{{ mapViewbox }}" viewbox="-183 425 1366 151">

我怎样才能得到我期望的结果：

<svg height="151px" width="1366px" viewBox="-183 425 1366 151">

谢谢。

【问题讨论】：

标签： svg angularjs

【解决方案1】：

看看这个指令是否有效：

app.directive('vbox', function() {
  return {
    link: function(scope, element, attrs) {
      attrs.$observe('vbox', function(value) {
        element.attr('viewBox', value);
      })
    }
  };
});

HTML：

<svg height="151px" width="1366px" vbox="{{ mapViewbox }}">

Plnkr。您需要“检查元素”或“查看源代码”才能看到 svg 标记。

更新：如果您的应用包含 jQuery，请参阅Does the attr() in jQuery force lowercase?

@Niahoo 发现如果包含 jQuery，这将起作用（他对这篇文章进行了编辑，但由于某种原因，其他 SO 版主拒绝了它......不过我喜欢它，所以在这里）：

 element.get(0).setAttribute("viewBox", value);

【讨论】：

嗨，谢谢，但它不起作用。我试过用不同的名字来确定。 element.attr 每次都设置小写的属性名称。
你让我发现 jQuery 是原因，感谢您指出指令。看起来很强大。
很烦人！ element.get(0).setAttribute("viewBox", value);而不是 element.attr('viewBox', value) 适用于 angular 1.4.7

【解决方案2】：

自己寻找解决方案我找到了这个答案，正确的方法是使用模式转换ng-attr-view_box

【讨论】：

这应该是经过验证的答案。效果很好。
不适用于 angular 1.2 + jquery 1.9。您必须至少有 jquery 3.0 才能正常工作。
这是来自AngularJS的官方解决方案：docs.angularjs.org/guide/interpolation

【解决方案3】：

建议的解决方案不起作用。我不是 javascript 专业人士，但确实如此。

app.directive('vbox', function () {
    return {
        link: function (scope, element, attrs) {
            attrs.$observe('vbox', function (value) {
                element.context.setAttribute('viewBox', value);
            })
        }
    };
});

【讨论】：

嗨，您必须阅读完整的答案。它有效，使用与您提供的相同解决方案（但使用 ̉element.get(0) ）

【解决方案4】：

指令链接函数中的类似内容（想象一个使用变量的作用域）：

        var svg = $compile(
            $interpolate('<svg width="{{w}}" height="{{h}}" class="vis-sample" id="vis-sample-{{$id}}" viewBox="0 0 {{w}} {{h}}" preserveAspectRatio="xMidYMid meet"></svg>')( scope )
        )( scope );

关键是在$compile之前使用$interpolate。必须有更好的解决方案，但这是我所知道的最直接的选项，用于变量最初都可用的单通道模板。

【讨论】：