angularjs with svg image template

Question

I use AngularJs v1.6.10 My html view contains code:

<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>

When ctrl.getType()===2 in browser displays next code:

<g>

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

and image not displayed.
Has anyone encountered a similar problem?

Answer 1

I solved this problem with custom directive

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'
        };
    }]);