Angular JS template binding with HTML and Native node
Angular JS template binding with HTML node
You can able to bind data to the template of a HTML node using $parent scope. The following code illustrates how to bind data to the template of HTML node at the initialization.
HTML
<script id="htmlTemplate" type="text/ng-template">
<span>{{$parent.name}}</span>
</script>
<div ng-controller="diagram">
<div>
Name: <input type="text" ng-model="name"><br/>
</div>
<div class="content-container-fluid">
<div class="row">
<div class="cols-sample-area">
<ej-diagram id="diagramCore" e-height="301px" e-width="501px" e-nodes="nodes"
e-pagesettings-pageheight="pageSettings.pageHeight"
e-pagesettings-pagewidth="pageSettings.pageWidth"
e-pagesettings-pageOrientation="landscape"
e-pagesettings-pagebackgroundcolor="pageSettings.pageBackgroundColor">
</ej-diagram>
</div>
</div>
</div>
</div>
Java-script
angular.module('syncApp', ['ejangular']).controller('diagram', function ($scope) {
$scope.pageSettings = {
pageWidth: 500,
pageHeight: 300,
pageBackgroundColor: "White",
};
$scope.name = "Html Node";
$scope.nodes = [{ name: "node1", height: 100, width: 100, offsetX: 200, offsetY: 100, type: "html", templateId: "htmlTemplate" }];
});
The following screenshot displays the Html Node binding with a text-box.
In the above sample, on changing textbox’s text results in text change in the html node.
