带有svg图像模板的angularjs

Question

我使用AngularJs v1.6.10我的html视图包含代码：

<script type="text/ng-template" id="animation_item_renderer.html">
<g opacity="1">
    <g ng-repeat="ctrl in control.controls">
        <g>
            <g>
                <image id="{{ctrl.id}}" xlink:href="{{ctrl.imageSource}}"
                       animation-size-item item-width="ctrl.width"
                       item-height="ctrl.height"
                       ng-if="ctrl.getType()===2">
                </image>
                <rect id="{{ctrl.id}}" fill="{{ctrl.color}}" width="150"
                      height="20" ng-if="ctrl.getType()===1">
                </rect>
            </g>
        </g>
    </g>        
    <g ng-repeat="control in control.children" opacity="1" 
       ng-include="'animation_item_renderer.html'">
    </g>
</g>

<svg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio="xMinYMin meet" viewBox="0,0,1000,700" style="background-color: ivory;font-size: 32px">
<g ng-repeat="control in vm.controls" ng-include="'animation_item_renderer.html'">

</g>

当浏览器中的ctrl.getType（）=== 2显示下一个代码时：

<g>

    <!-- ngIf: ctrl.getType()===2 -->
    <!-- end ngIf: ctrl.getType()===2 -->
    <!-- ngIf: ctrl.getType()===1 -->
</g>

并且图像不显示。
有没有人遇到过类似的问题？

Answer 1

我用自定义指令解决了这个问题

directive("svgImage", [function() {
        return {
            restrict: 'E',
            replace: true,
            scope: {
                xAxis: '=',
                yAxis: '=',
                imgHeight: '=',
                imgWidth: '=',
                imgSrc:'='
            },
            template:
                '<image xlink:href="{{imgSrc}}" ng-attr-x="{{xAxis}}" ng-attr-y="{{yAxis}}" ng-attr-height="{{imgHeight}}" ng-attr-width="{{imgWidth}}"></rect>',
            templateNamespace: 'svg'
        };
    }]);