为什么这个 SVG 的宽度没有用 ng-attr-width 设置？

Question

我有一个非常简单的网页来尝试隔离我不明白的 ng 绑定：

<html ng-app="AngularSVGTestApp">
<head>
    <title>Angular SVG Test</title>
    <style>
        svg {
            background-color: aqua;
        }
    </style>
</head>
<body ng-controller="MainCtrl as mainCtrl">
    <div ng-cloak>
        <svg ng-show="mainCtrl.svg.show"
             xmlns="http://www.w3.org/2000/svg"
             baseProfile="full"
             version="1.1"
             ng-attr-width="mainCtrl.svg.width"
             ng-attr-height="mainCtrl.svg.height">
        </svg>
    </div>
    <script src="/Scripts/angular.js"></script>
    <script>
        angular.module('AngularSVGTestApp', [])
                .controller('MainCtrl', ['$http', function ($http) {
                    var self = this;
                    self.svg = {
                        show: true,
                        width: 400,
                        height: 400
                    };
                }]);
    </script>
</body>
</html>

(Or fiddle.)

我希望 SVG 的宽度和高度为 400，由 ng-attr-width="mainCtrl.svg.width" 和 ng-attr-height="mainCtrl.svg.height" 根据模型中的值设置。

但他们不是。当我使用浏览器的开发工具检查 SVG 元素时，它的大小为 1054 x 931（在 Chrome 中全屏）、1520 x 281.6（在 IE 中全屏）或 300 x 150（在 [=14= 中） ])

为什么？如何从 AngularJS 绑定 SVG 的宽度和高度？

Answer 1

编辑到前面： 我原来的答案不正确 - ngAttrX 对属性 X 有效（例如 Width).它在原始问题中不起作用的原因是缺少插值大括号（即应该是 ng-attr-width="{{mainCtrl.svg.width}}"）。

对此感到抱歉。

ngStyle 可以用来设置宽度和高度，如注释所建议的。我写这个答案更多的是试图帮助解释它是如何工作的（以及为什么你的 ng-attr-width 没有），并且可能从 ngStyle.[=26= 中删除一些 "magic" ]

ngStyle本身就是一个directive。它在 ng-style 属性上添加了一个 $watchCollection，并在此基础上简单地添加了 css 规则。

ngAttrWidth 没有指令，但如果您想要一个，则可以通过将 $watch 链接到相关属性来相当简单地创建一个修改元素。这可能与无法从 CSS（例如 path）中获取的 SVG 属性更相关。

编辑：

关于 ng-attr-width 我错了，Angular 确实有适当的逻辑来修改任何 ng-attr 前缀属性的属性。如果您始终知道该指令将提供相同的属性，则此方法效果很好。

如果您不确切知道将提供哪些属性，创建指令仍然是一种选择。这是使用您的样式集合的图片示例（指令代码主要复制和改编自 Angular 的 ngStyle directive): http://jsfiddle.net/n7fq3oy2/3/

为什么这个 SVG 的宽度没有用 ng-attr-width 设置？

Why is this SVG's width not set with ng-attr-width?

angularjs

svg