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的宽度和高度由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（the fiddle中）

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

Answer 1

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

很抱歉。

正如评论所示，

ngStyle可用于设置宽度和高度。我正在写这个答案，试图帮助解释这是如何工作的（以及为什么你的ng-attr-width没有），或者从ngStyle中删除一些“魔法”。

ngStyle本身就是directive。它会在$watchCollection属性上添加ng-style，并根据此添加css规则。

ngAttrWidth有 no 指令，但是如果你想要一个，那么你可以通过将$watch链接到相关属性来修改元素。这可能与无法从CSS中获取的SVG属性更相关（例如path）。

编辑：

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

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

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

1 个答案: