角度工厂修改页面上的svg

Question

这是this question的后续行动，尽管它们只是松散相关。

我的工厂打算在一些面包屑链接周围放置一些svg盒子。

我的问题是：工厂是正确的方法吗？工厂应生产东西并将其交还。我可以在现有元素上操作吗？或者我应该从我的HTML中删除元素并在我的工厂生成整个HTML块，然后将其返回给我的控制器？

控制器：

...
$scope.linkStages = [{'view': 'twitter'}, {'view': 'ad'}, {'view':'campaign'}];
...
        var coordinates = function(i) {
            i = Number(i);
            var x1 = i * stagesWidth + ',' + 0 + ' ';
            var x2 = i * stagesWidth + ',' + stagesHeight + ' ';
            var x3 = (i + 1) * stagesWidth + ',' + stagesHeight + ' ';
            var x4 = (i + 1) * stagesWidth + stagesHeight/2 + ',' + (stagesHeight/2) + ' ';
            var x5 = (i + 1) * stagesWidth + ',' + 0;
            return x1 + x2 + x3 + x4 + x5;
        };

        /*
         * Calculate the position of the text inside a polygon
         * type 'y' will give the y coordinate
         * type not 'y' will given you the x coordinate
         * i is the position the polygon appears in the guide bar
         */
        var textCoord = function(i, type) {
            if (type === 'y') {
                return (stagesHeight/2) + 5;
            } else {
                return ((Number(i) + 0.5) * stagesWidth);
            }
        };

厂：

// add fields to linkStage objs for visual display
for (var i in linkStages) {
     linkStages[i].title = '';
     linkStages[i].points = coordinates(i);
     linkStages[i].textX = textCoord(i, 'x');
     linkStages[i].textY = textCoord(i, 'y');
}

HTML：

<span class="exportBar">
    <div class='svgContainer'>
        <svg sys-width='{{svgWidth}}' height='35' >
            <polygon ng-repeat="stage in linkStages.slice().reverse()" sys-points="{{stage.points}}" ng-class="exportView === stage.view ? 'selected': 'none'"/>
            <text ng-repeat="stage in linkStages" text-anchor="middle" sys-x="{{stage.textX}}" sys-y="{{stage.textY}}">{{stage.title | cut:false:12:'...'}}</text>
        </svg>
    </div>
</span>

指令：

angular.module('sysomos.ads').
directive('sysX', [
    function() {
        return function(scope, element, attrs) {
            attrs.$observe('sysX', function(value) {
                attrs.$set('x', value);
            });
        };
    }
])
...
directive('sysPoints', [
    function() {
        return function(scope, element, attrs) {
            attrs.$observe('sysPoints', function(value) {
                attrs.$set('points', value);
            });
        };
    }
]).
directive('sysWidth', [
    function() {
        return function(scope, element, attrs) {
            attrs.$observe('sysWidth', function(value) {
                attrs.$set('width', value);
            });
        };
    }
]);