Angularjs;动态添加自定义属性指令

Question

我正在尝试动态地将自定义属性指令添加到svg g元素。

最初我试图将它添加为包含g元素模板的元素指令但是，我意识到svg元素无法识别外部元素指令，除非我将它包装在foreignObject-tag中;我认为看起来很草率。

我在服务中有一个函数，它创建一个svg元素并返回一个jquery对象，该对象将标记名称和attrs作为参数。

我知道如何动态创建元素指令但是，我如何将这个属性指令附加到g元素？

更新

目前，该指令仅将svg元素附加到预先存在的svg画布中。 它还具有操作元素内数据的功能，但是在svg可以绘制它之前我不能使用它。

// customeDirect.js

(function() {
    angular.module('app')
        .directive('customDirect', function() {
            var linker = function(scope, element, attrs) {
            };

            var controller = function($scope, $element) {
                $scope.visible = true;
            };

            return {
                link: linker,
                controller: controller,
                template: '<g class="group" ng-show="visible">'       +
                              '<ellipse class="body" rx="50" ry="33"' +
                                   'cx="100" cy="83">'                +
                              '</ellipse>'                            +
                              '<g class="content"></g>'               +
                          '</g>',
                restrict: 'AE'
            }
        })
    ;
})();

如何将此附加到预先存在的svg元素或g标记？