Articles in this section
Category / Section

Defining events in Angular JS using $Scope.

1 min read


Ribbon control’s click event is fired only when it is defined outside the IIFE, or Immediately Invoked Function Expression and not inside the controller in Angular project.


In Angular JS, you cannot just specify the click handler’s name and trigger the click event. Instead, you have to specify the click instance using $scope, while using the event inside the controller.


(function () {
angular.module('app', ['ejangular']);
angular.module('app').controller('appRibbonCtrl', appRibbonCtrl);
appRibbonCtrl.$inject = ['$scope'];
function appRibbonCtrl($scope) {
$scope.clickHandler = function (sender) {
alert("Click event fired from inside the controller");
function getRibbonTab(tabName) {
var returnValue = {
id: tabName, text: tabName, groups: [{
text: "Click me", alignType: ej.Ribbon.alignType.rows, content: [{
groups: [{
id: "new",
text: "Click me!!",
toolTip: "Click me",
buttonSettings: {
contentType: ej.ContentType.ImageOnly,
imagePosition: ej.ImagePosition.ImageTop,
prefixIcon: "e-ribbon e-new",
click: $scope.clickHandler   //Please specify click instance using $scope. Don’t specify just handler name (click: "clickHandler")
defaults: {
type: ej.Ribbon.type.button,
width: 60,
height: 70
return returnValue;
//Init ribbon tabs
$scope.ribbonTabs = [];

Did you find this information helpful?
Help us improve this page
Please provide feedback or comments
Please sign in to leave a comment