如何防止 AngularJS 制作小写的 HTML 属性 [英] How to prevent AngularJS from making lowercase HTML attributes

问题描述

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

I am trying to render some SVG with AngularJS but I can't dynamically change the viewbox of the svg element.

Angular 呈现一个 'viewbox' 属性，但浏览器需要一个 'viewBox' 属性.所以结果是:

Angular renders a 'viewbox' attribute, but browsers expect a 'viewBox' attribute. So the result is:

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

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

How can I get the result I expect:

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

谢谢.

推荐答案

看看这个指令是否有效:

See if this directive works:

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 标签.

Plnkr. You'll need to "Inspect element" or "View source" to see the svg tag.

更新:如果您的应用包含 jQuery，请参阅jQuery 中的 attr() 是否强制小写?

Update: If your app includes jQuery, see Does the attr() in jQuery force lowercase?

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

@Niahoo found that this worked if jQuery is included (he made an edit to this post, but for some reason, other SO moderators rejected it... I liked it though, so here it is):

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

这篇关于如何防止 AngularJS 制作小写的 HTML 属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！