BoldSignA modern eSignature application with affordable pricing. Sign up today for unlimited document usage!
Thanks for using Syncfusion products.
We suggest you ribbon custom contents using the property e-contentid(custom content’s id) with the type "custom" to use AngularJS route links . Please refer the below Code snippets,
1.Use AngularJS route link ng-click for ej button.
<div id="defaultRibbon" ej-ribbon e-width="100%" e-applicationtab-itemid="menu" e-applicationtab-type="ApplicationMenu" e-create="createControl"> // Declare ribbon tab’s create event.
<div e-group e-id="anchorbutton1" e-tooltip="Click Anchor button1." e-type="custom" e-contentid="clickanchor1"></div>
<button id="clickanchor1" ng-click="clickbtn()">EJ button</button> //Use AngularJS route link ng-click.
<script>
angular.module('ribbonApp', ['ejangular']).controller('RibbonCtrl', function ($scope) {
$scope.clickbtn = function () { //Define ng-click clickbtn method.
location.rel='nofollow' href = 'http://js.syncfusion.com';
};
});
</script>
function createControl(args) {
$("#clickanchor1").ejButton(); //Change the button to ejButton using the ribbon tab’s create event.
}
2. Use AngularJS route link ng-rel='nofollow' href for html button.
<div e-group e-id="anchorbutton2" e-tooltip="Click Anchor button2." e-type="custom" e-contentid="clickanchor2"></div>
<a id="clickanchor2" ng-rel='nofollow' href="http://www.google.co.in">
<button>Html button</button></a> //Use AngularJS route link ng-rel='nofollow' href.
Please find the below sample for your reference.
Sample: http://www.syncfusion.com/downloads/support/forum/119970/ze/AngularRibbon_Alink1329018794
Please let us know if you need any further assistance.
Regards,
Sarath Kumar P.
Thanks for your update.
We have modified the sample with AngularJS route links and EJ Button using Html . Please refer the below steps:
Step #1 : Render ribbon with angular tags
Render the ribbon control with angular as specified below.
<div id="Div1" ej-ribbon e-width="100%" e-applicationtab-itemid="menu" e-applicationtab-type="ApplicationMenu"> <div e-tabs> <div e-tab e-id="home" e-text="HOME"> <div e-groups> <div e-group e-text="New" e-aligntype="rows"> <div e-content> <div e-content> <div e-groups> // e-contentid is template to render ej button <div e-group e-id="abtn1" e-tooltip="Click Anchor button1." e-type="custom" e-contentid="A1"></div> </div> </div> </div> </div> </div> </div> </div> </div> |
Step #2 : Use AngularJS route link ng-rel='nofollow' href in html.
<a id="A1" ng-rel='nofollow' href="a.html"> <button id="ejBtn">EJButton</button></a> //AngularJS route link ng-rel='nofollow' href in html with EJ button and local file a.html is referred. <script type="text/javascript"> $("#ejBtn").ejButton(); //To Render EJ Buttton. </script> |
For your convenience , please find modified sample:
http://www.syncfusion.com/downloads/support/forum/119970/ze/AngularJS_Links-1635437404
Please let us know if you need any further assistance.
Regards,
Sarath Kumar P.