How to properly set AngularJS route links to ribbon buttons?

[Cezar Lamann]

Hi all.

Here I'm trying to add a Ribbon on top of an Yeoman AngularJS scaffolded app. However, exploring the samples, I saw that all ribbon stuff was set with javascript (menu, button, texts, etc..). With Angular, we could point to views using simple <a ng-rel='nofollow' href="#/something">Something</a> links. How to put these links inside buttons on ejRibbon?

[Sarath Kumar P]

Hi Cezar,

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.

[Cezar Lamann]

Hi Sarath Kumar P! Thank you for answering. Is there a way to set my route links inside javascript samples (those where ribbon is set with javascript instead of html only)?

[Sarath Kumar P]

Hi Cezar,

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.