angular directive gets lost in shape template

[Jia]

if I specify an angular directive in the shape template, it gets lost from the rendered SVG. For example, I have a html template for shape like this:

<script id="template" type="text/x-kendo-template">
<div ng-model="eBDiagram.task"></div>
</script>

in shapeDefaults.visual:

        visualShapeTemplate = options => {
            // Render template and bind it to the current data item
            var dataItem = options.dataItem.content;
            var renderElement = $('<div />').appendTo('body');

            // Import the Drawing API namespaces
            var draw = kendo.drawing;

            // Compile the shape template
            var contentTemplate = kendo.template($('#template').html());
            renderElement.html(contentTemplate(dataItem));

            // Create a new group that will hold the rendered content
            var output = new kendo.drawing.Group();
            draw.drawDOM(renderElement, null)
                .then(group => {
                    output.append(group);

                    /* Clean-up */
                    renderElement.remove();
                });

            var visual = new kendo.dataviz.diagram.Group();
            visual.drawingElement.append(output);

            return visual;
        }

 

but data isn't bound through 'ng-model' in the resulting SVG. I even tried explicitly to link the scope variable with the template, but no data appeared in the resulting SVG:

            if (renderElement) {
                .$compile(renderElement)($scope);
            } 

[Niko]

Hello Jia,

I am pasting the response from our previous discussion in a support thread for convenience and better visibility for the community:

The drawing API library converts the provided HTML elements to its own primitives that are then converted to other formats. That is the reason why the provided template loses its attributes and meta-data once converted back to SVG elements.

If you have to update any shape with new content, you need to update it without relying on angularjs's mechanisms of tracking content change. You need to use the diagram widget itself to either refresh the data source (if you use data source in the diagram) or directly call the redrawVisual method on the specific shapes. Please, check the following dojo for an sample on the described approaches - dojo.telerik.com/OjobUb.

 

Regards,
Niko
Telerik by Progress