I have successfully defined the Kendo notification in my Angular service. However, when I try to use it with the line uiService.notify.error("You missed some required fields.");, I am getting an error that says "Cannot read property 'show' of null". How can I resolve this issue?
HTML
<span kendo-notification="notification" k-options="notifyOptions"></span>
<button class="k-button" ng-click="showInContainer()">Show in container</button>
controller.js
(function () {
'use strict';
angular
.module('app')
.controller('dataController', DataCtlr);
DataCtlr.$inject = ['$scope', '$log', '$http', 'DataService','uiService'];
function DataCtlr($scope, $log, $http, DataService, uiService) {
$scope.showInContainer = function () {
uiService.notify.error("You missed some required fields.");
};
}
service.js
(function () {
"use strict";
app.factory("uiService", uiService);
uiService.$inject = ["$rootScope", "$window", "$document"];
function uiService($rootScope, $window, $document) {
var svc = {
settings: {},
notification: null, // kendo notification control
notify: null
};
init();
return svc;
function init() {
initNotifications();
$rootScope.ui = svc; // make available to the views
$rootScope.notify = svc.notify; // for httpExceptionInterceptor
}
function initNotifications() {
svc.notifyOptions = {
templates: [{
type: "success",
template: "<div class='bg-success'><i class='fa fa-check' />#= message #</div>"
}, {
type: "error",
template: "<div class='bg-danger'><i class='fa fa-exclamation-circle' />#= message #</div>"
}, {
type: "info",
template: "<div class='bg-info'><i class='fa fa-info-circle' />#= message #</div>"
}]
}
svc.notify = {
success: function (message) {
svc.notification.show({ message: message }, 'success');
},
error: function (message) {
svc.notification.show({ message: message }, 'error');
},
info: function (message) {
svc.notification.show({ message: message }, 'info');
}
}
}
}
}());