We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Angular JS template binding with HTML and Native node

Platform: JavaScript |
Control: ejDiagram |
Published Date: November 28, 2015 |
Last Revised Date: May 30, 2019

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.

Html node binding with a text box

 

In the above sample, on changing textbox’s text results in text change in the html node.

 

ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon