Question

我使用的是element.append方法，但屏幕上没有任何内容。似乎svg在我使用此方法时不会呈现元素。这是example。

app.directive('dir',  function($document){
    return{
        restrict: "A",
        link: function(scope, element, attr)
        {
            scope.add_circle = function (){
               var area = angular.element( document.querySelector("#draw_area") );
               area.append("<circle cx=50 cy=50 r=10 fill='red'></circle>");
                alert("Circle appended!")
            };
        }
}
});

Answer 1

在我看了一些关于此的答案之后，我将我的代码编辑为：

app.directive('dir',  function($document){
return{
    restrict: "A",
    link: function(scope, element, attr)
    {
        scope.add_circle = function (){
           var area = angular.element( document.querySelector("#draw_area") );
           var namespace = "http://www.w3.org/2000/svg";
           var name = "circle";
           var attributes = {cx: 50, cy:50, r:10, fill: 'red'};
           var svg_element = document.createElementNS(namespace, name);
           for (var attr in attributes)
               svg_element.setAttribute(attr, attributes[attr])
           area.append(svg_element);
            alert("Circle appended!")
        };
    }

} }）;

Here是关于这个问题的好答案。

如何在AngularJS指令中追加svg元素？

1 个答案: