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

Question

我试图用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">

谢谢.

Answer 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,请参阅jQuery中的attr()是否强制小写？

@Niahoo发现如果包含jQuery这会有效(他对这篇文章进行了编辑,但出于某种原因,其他SO主持人拒绝了它......我喜欢它,所以这里是):

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

Answer 2

寻找解决方案我自己找到了答案,实现这一目标的正确方法是使用模式转换 ng-attr-view_box