一些可以帮助我使用 Syncfusion ej-angular 使用 Angularjs 在形状中添加 HTML 元素答案

【问题标题】：Can some help me with the Addition of HTML elements within the Shapes using Syncfusion ej-angular using the Angularjs一些可以帮助我使用 Syncfusion ej-angular 使用 Angularjs 在形状中添加 HTML 元素
【发布时间】：2020-11-13 02:13:06
【问题描述】：

我正在尝试遵循Syncfusion AngularJs 的官方文档并尝试创建Nodes，其中将嵌入HTML Elements，例如按钮、文本框等，但由于某种原因，我无法获得他们在文档中提到的输出。我试着搜索了很多，但没有相关的帖子，因此问了同样的问题。

官方文档链接：https://help.syncfusion.com/angularjs/diagram/shapes#html

让我烦恼的一件事是这条线。我不知道为什么他们在 HTML 中有这个，然后他们创建了DIV:<script id="htmlTemplate" type="text/x-jsrender"></script>

如果有人可以帮助我如何创建节点，我将不胜感激，我可以在其中添加我选择的 HTML 元素。

到目前为止我的代码：

<!DOCTYPE html>
<html ng-app="defaultApp">
    <head>
        <link rel="icon" href="images/logo.jpg">
        <title>Draw Shapes with HTML</title>
        <link rel="stylesheet" href="http://cdn.syncfusion.com/14.3.0.49/js/web/bootstrap-theme/ej.web.all.min.css" />
        <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
        <script src="http://cdn.syncfusion.com/js/assets/external/jsrender.min.js" type="text/javascript"></script>
        <script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.min.js"></script>
        <script src="https://code.angularjs.org/1.4.0-rc.2/angular.min.js"></script>
        <script src="http://cdn.syncfusion.com/14.3.0.49/js/web/ej.web.all.min.js" type="text/javascript"></script>
        <script src="http://js.syncfusion.com/demos/web/scripts/xljsondata.js" type="text/javascript"></script>
        <script src="https://code.angularjs.org/1.4.0-rc.2/angular-route.min.js"></script>
        <script src="http://cdn.syncfusion.com/14.3.0.49/js/common/ej.widget.angular.min.js"></script>
        <script src="http://borismoore.github.io/jsrender/jsrender.min.js"></script>
        
        <script src="./js/draw.js"></script>
            
    </head>
    
    <body ng-controller="diagramCtrl">
        <ej-diagram id="diagram" e-height="500px" e-width="700px" e-nodes="nodes"></ej-diagram>
        <button class="btn btn-info">Add</button>
    </body>     
</html>

我在draw.js 文件中的AngularJS 代码是这样的：

var syncApp = angular.module("defaultApp", ["ngRoute", "ejangular"]);

var diagram = ej.datavisualization.Diagram;

//Creates a html node
var nodes = [{
    name: "htmlNode",
    offsetX: 100,
    offsetY: 100,
    width: 100,
    height: 50,
    type: ej.datavisualization.Diagram.Shapes.Html,
    templateId: "htmlTemplate",
    value: "Button"
}];

syncApp.controller('diagramCtrl', function($scope) {
    //Sets nodes collection to Diagram model.
    $scope.nodes = nodes;
});

到目前为止，我的 HTML 如下所示：

【问题讨论】：

你可以试试下面的链接吗？ ngjq.syncfusion.com/#/diagram/drawingtools
@Karthick 非常感谢您提供的链接。我正在经历它，似乎对我很有用。从过去几个小时开始，我一直在寻找类似的东西。非常感谢。

标签： javascript html angularjs angular syncfusion

【解决方案1】：

在分析提供的代码 sn-p 时，您已将 htmlTemplate 设置为 div 元素。如果我们设置非脚本元素意味着节点的 htmlTemplate 不可见。如果要为节点设置 htmlTemplate 意味着然后在脚本元素中设置。这样只有节点的 htmlTemplate 可见。我们在脚本中使用了您的 HTML 内容来显示节点的 htmlTemplate。

<script id="htmlTemplate" type="text/x-jsrender">                        
//Html Template                            
</script>

示例：http://jsplayground.syncfusion.com/5z2stf0b

【讨论】：