时间戳

首页 > 解决方案 > 一些人可以帮助我使用 Angularjs 使用 Syncfusion ej-angular 在形状中添加 HTML 元素

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

问题描述

我正在尝试遵循官方文档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>

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

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 如下所示： 在此处输入图像描述

标签： javascripthtmlangularjsangularsyncfusion

解决方案

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

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

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

推荐阅读