1. Home
  2. Forum
  3. jQuery
  4. Angular support

Angular support

Hi,

I am planning to use ejToolbar, ejCheckbox with ejDiagram in my angular based web application. Are they supporting angular ?

If yes then any sample for event binding.

Regards,
Sachin

14 Replies
KR Kameshwaran R Syncfusion Team June 3, 2016 04:31 AM UTC

Hi Sachin, 
 
We have achieved your requirement and playground sample link have been updated below. Please find the below sample link. 
 
 
Regards, 
Kameshwaran R. 


SS Sachin Shah June 6, 2016 11:45 AM UTC

Thanks a lot for great sample.

But If I add dynamic control in loop

  <div ng-repeat="item in oList" >
<ej-diagram id="diagramCore{{$index}}" .....

Or

 <div id="toolbar{{$index}}" ...

then its giving errors.. like

Error: Syntax error, unrecognized expression: #diagramCore{{$index}}_contextMenu
or
Error: Syntax error, unrecognized expression: #toolbar{{$index}}_target


Regards,
Sachin

SK Senthil Kumar M Syncfusion Team June 9, 2016 11:04 AM UTC

Hi Sachin, 
 
Please use the below format to resolve your reported issue. 
 
<ej-diagram ng-attr-id="{{ 'object-' + index }}" ></ej-diagram> 

angular.module('syncApp', ['ejangular']) 
             .controller('diagram', function ($scope) { 
               $scope.index=2; 
}); 

Here is the playground link for your reference. 

Regards, 
Senthilkumar M 


SS Sachin Shah June 9, 2016 04:26 PM UTC

Thanks.

How to pass parameter in any event ? E-click="onItrmClick(0)"

SS Sachin Shah June 10, 2016 05:11 AM UTC

ng-attr-id="{{ 'object-' + index }}" is works great. But How to get diagram id in nodeCollectionChange event ??

NG Naganathan Ganesh Babu Syncfusion Team June 10, 2016 11:54 AM UTC

Hi Sachin, 
 
Currently we don’t have an option to get the diagram id in events and we have created a new incident for this query. please refer to that incident for further updates. 
 
However as a workaround, you can get the diagram id from node by defining the diagram id in defaultSettings’s node property. 
 
Here is the code example: 
 
<ej-diagram ng-attr-id="{{ 'object-' + index }}" e-height="500px" e-width="700px" e-nodes="nodes" e-backgroundcolor="backgroundColor" 
   e-defaultsettings-node="defaultSettings.node" 
   e-nodecollectionchange="nodeCollectionChange"> 
</ej-diagram> 
angular.module('syncApp', ['ejangular']) 
      .controller('diagram', function ($scope) { 
     $scope.defaultSettings = { 
            node: { 
               diagramId: "object-2" 
            } 
     }; 
     $scope.nodeCollectionChange = function (args) { 
          if (args.element) { 
             console.log(args.element.diagramId); 
          } 
     } 
}); 
 
Here is playground link for your reference. 
 
 
Regards, 
 
Naganathan K G 


SS Sachin Shah June 12, 2016 10:37 AM UTC

How to set diagram background in angularjs ?

Attached modified your sample.

Regards,
Sachin

Attachment: EssentialStudioforJavaScript_DiagramDrawingTool_e4ee669a.zip

SK Senthil Kumar M Syncfusion Team June 13, 2016 10:16 AM UTC

Hi Sachin, 

Please use backgroundImage’s source property to set the image path and set pageSettings “pageBackgroundColor” property as transparent since it will hide the image if it has other than transparent color. 

Please refer to the below code example. 

$scope.backgroundImage = { 
   source: 'https://cdn.syncfusion.com/content/images/company-logos/Syncfusion_Logo_Innovation_with_ease.png' 
}; 
$scope.pageSettings = { 
   pageBackgroundColor: "transparent" 
}; 
 
<ej-diagram ng-attr-id="{{ 'object-' + index }}" e-height="500px" e-width="700px" e-nodes="nodes" e-backgroundcolor="backgroundColor" 
     e-backgroundImage-source="backgroundImage.source"> 
</ej-diagram> 
 

Regards, 
Senthilkumar M 


SS Sachin Shah June 14, 2016 04:14 PM UTC

Thanks a lot. 

Its working fine in web browser. 

But I am trying to use that application on phonegap. but its not working.

any setting required for phonegap ?

Regards,
Sachin

SK Senthil Kumar M Syncfusion Team June 15, 2016 12:03 PM UTC

Hi Sachin, 

Please confirm whether you have defined the attribute “ng-app” in the HTML element. Also to allow CDN link, define the CDN link in CSP (Content-Security-Policy). 

<html xmlns="http://www.w3.org/1999/xhtml" ng-app="syncApp"> 
<head> 
    <meta charset="utf-8" /> 
    <meta name="format-detection" content="telephone=no" /> 
    <meta name="msapplication-tap-highlight" content="no" /> 
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" /> 
    <meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-inline'; style-src 'self' http://cdn.syncfusion.com/ 'unsafe-inline'; media-src *" /> 
</head> 
 
Here is the sample for your reference. 

Regards, 
Senthilkumar M 


SS Sachin Shah June 22, 2016 03:35 AM UTC

Thanks a lot for your great support. Without your support, I am not able to develop demo application for my client.

Except diagram Id - everything works well.


Regards,
Sachin

SG Shyam G Syncfusion Team June 23, 2016 12:29 PM UTC

Hi Sachin, 
 
Query  
Response 
Except diagram Id - everything works well. 
Please confirm us whether the workaround is not working which was provided in the earlier update? If not, please share us more details such as screenshot or console error if any in browser. 
 
Regards, 
Shyam G 


SS Sachin Shah July 1, 2016 10:21 AM UTC

Thanks.

reference to CDN  is not working with phone gap..  

Can copy all js and css files locally? If yes then how ?

Regards,
Sachin



SG Shyam G Syncfusion Team July 4, 2016 12:49 PM UTC

Hi Sachin, 

Please check whether you have referred the below line(Content-Security-Policy) in your application to render the diagram with CDN link. 

<meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-inline'; style-src 'self' http://cdn.syncfusion.com/ 'unsafe-inline'; media-src *" /> 
 
 
To refer the CSS and script files locally, please refer those files parallel to the HTML file. Please refer to the sample below for your reference. 
 
 
Please refer to the screenshot below in which we have shown how to refer the CSS and script file parallel to the HTML file. 
 
Screenshot: 
 

Regards, 
Shyam G 


Loader.
Up arrow icon