如何防止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标签。

@Niahoo发现，如果包括jQuery，这是可行的（他对此文章进行了编辑，但是由于某种原因，其他SO版主拒绝了它……我喜欢它，所以在这里）：

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