Question

我想将背景颜色绑定到svg元素。我有一个我正在引用的外部svg文件，myfile.svg，在这个文件里面有一个id为'mycircle'的圆圈。

所以我的html看起来像：

<div ng-controller="MyCtrl">
<embed src="myfile.svg" id="mySvg"/>
</div>

我有一个看起来像的控制器：

function MyCtrl($scope) {
   $scope.myfill = 'yellow';   
}

现在我想以编程方式设置绑定，这就是我所做的：

var mySvg = document.getElementById("mySvg");
mySvg.addEventListener("load", function() {
    var svg = mySvg.getSVGDocument();
    var mycircle = svg.getElementById("mycircle");

    //this works:
    //mycircle.setAttribute("fill", "yellow");            

    $(mycircle).attr('ng-bind','myfill');
});

但是，这不会设置填充。我想我可能需要使用有角度的“编译”或其他东西来使这个工作（？）任何人都可以告诉我如何做到这一点？

Answer 1

是的，你需要编译。应绑定为exp并针对作用域进行编译。下面的代码段应该有用。

var mySvg = document.getElementById("mySvg");
mySvg.addEventListener("load", function() {
    var svg = mySvg.getSVGDocument();
    var mycircle = angular.element(svg.getElementById("mycircle"));
    mycircle.attr('fill', '{{myfill}}');
    $compile(mycircle)($scope);
});

如何以编程方式绑定svg元素上的属性？

1 个答案: