如何在svg元素上以编程方式ng绑定属性

How to programmatically ng-bind a property on an svg element?

本文关键字：方式 编程 ng 绑定 属性 svg 元素      更新时间：2023-09-26

我想将背景颜色绑定到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');
});

但是，这并不能设置填充。我想我可能需要使用有角度的"编译"或其他东西来实现这一点（？）有人能告诉我如何做到这一点吗？

是的，您需要编译。应绑定为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);
});
相关文章：