Category / Section
Defining events in Angular JS using $Scope.
1 min read
Problem
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.
Solution
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.
JS
<script>
(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 = [];
$scope.ribbonTabs.push(getRibbonTab("Tab1"));
$scope.ribbonTabs.push(getRibbonTab("Tab2"));
}
})();
</script>
