Category / Section
Angular JS template binding with HTML and Native node
1 min read
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.