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

问题描述

我想呈现一些SVG与AngularJS但我不能动态地改变SVG元素的视框。

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

角度呈现一个视框属性，但浏览器期望一个'视框属性。所以结果是：

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">

感谢。

推荐答案

看看这个指令如下：

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的，看的是否ATTR（）jQuery中力小写？

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);

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