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

How to properly set AngularJS route links to ribbon buttons?

Thread ID:





119970 Aug 19,2015 02:37 PM UTC Aug 21,2015 12:04 PM UTC JavaScript 3
Tags: ejRibbon
Cezar Lamann
Asked On August 19, 2015 02:37 PM UTC

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 [Syncfusion]
Replied On August 20, 2015 11:54 AM UTC

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.


angular.module('ribbonApp', ['ejangular']).controller('RibbonCtrl', function ($scope) {   

$scope.clickbtn = function () {                                                 //Define ng-click clickbtn method.

location.rel='nofollow' href = 'http://js.syncfusion.com';




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.

Sarath Kumar P.

Cezar Lamann
Replied On August 20, 2015 02:15 PM UTC

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 [Syncfusion]
Replied On August 21, 2015 12:04 PM UTC

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>









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.          


For your convenience , please find modified sample:


Please let us know if you need any further assistance.

Sarath Kumar P.


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

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