这是为什么SVG的宽度没有设置与NG-ATTR宽？ [英] Why is this SVG's width not set with ng-attr-width?
问题描述
我有一个非常简单的网页，尝试找出一个NG结合我不明白：
I have a very simple web page to try to isolate an ng binding I do not understand:
<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>
（或者拨弄。）
我期望SVG有宽度和高度400由 NG-ATTR-WIDTH =mainCtrl.svg.width和
I would expect the SVG to have width and height of 400 as set by ng-attr-width="mainCtrl.svg.width" and ng-attr-height="mainCtrl.svg.height" from the values in the model.
但事实并非如此。当我使用浏览器的开发工具来检查SVG元素的尺寸为1054点¯x931（全屏幕在Chrome），1520点¯x281.6（以IE浏览器全屏幕），或300×150（的<a href =HTTP：/ /jsfiddle.net/dumbledad/6tvpx21f/相对=nofollow>小提琴）
But they are not. When I use the browser's development tools to inspect the SVG element its size is 1054 x 931 (full-screen in Chrome), 1520 x 281.6 (full screen in IE), or 300 x 150 (in the fiddle)
为什么呢？我如何绑定一个SVG的宽度和高度从AngularJS？
Why? How do I bind the width and height of an SVG from AngularJS?
推荐答案
ngStyle 可用于设置宽度和高度，评论暗示。我在写这个答案更尽力帮助解释这是如何工作（为什么你的 NG-ATTR宽度没有），也许去掉一些神奇从 ngStyle 。
ngStyle can be used to set the width and height, as comments suggest. I'm writing this answer more to try to help explain how this works (and why your ng-attr-width does not), and perhaps remove some of the "magic" from ngStyle.
ngStyle 本身就是一个的指令。它增加了一个 $ watchCollection 在 NG-风格属性，只是增加了在此基础上的CSS规则。
ngStyle is itself a directive. It adds a $watchCollection on the ng-style attribute and simply adds css rules based on this.
有<击>没有指令为 ngAttrWidth ，但如果你想要一个，那么你可以通过链接做一个相当简单 $看相关属性进行修改的元素。这可能是它不能从CSS采取（如路径）。
There is no directive for ngAttrWidth, but if you want one then you could make one fairly simply by linking $watch to the relevant attribute to modify the element. This might be more relevant for SVG attributes which cannot be taken from CSS (such as path).
编辑：
看来我错了 NG-ATTR宽度，角确实有逻辑的地方，修改属性为任何 NG-ATTR - prefixed属性。这种运作良好，如果你一直都知道这个指令将提供相同的属性。
It appears I was wrong about ng-attr-width , Angular does have logic in place to modify attributes for any ng-attr-prefixed attributes. This works well if you always know that this directive will be provided the same attributes.
如果你并不确切地知道哪些属性将被提供，创造一个指令仍是一个选项。这里是你的照片例如用你的风格集合（指令code复制大多从角的的 ngStyle指令）：的http：//的jsfiddle .NET / n7fq3oy2 / 3 /
If you do not know exactly which attributes will be provided, creating a directive is still an option. Here is your pictures example working with your style collection (directive code mostly copied and adapted from Angular's ngStyle directive): http://jsfiddle.net/n7fq3oy2/3/
这篇关于这是为什么SVG的宽度没有设置与NG-ATTR宽？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
