CODEWITHSUNDEEP
angularjskendo-uiangular-kendo
Michael Witt
Michael Witt

Reputation: 1712

kendo-ui notification scope variable not set in Angular controller

I've noticed this issue with other kendo-ui controls, but I'll ask specifically about kendo-notification. My html has:

<span kendo-notification="vm.notifier"></span>
<button ng-click="vm.push()">Push it</button>

In my controller I have:

(function () {
'use strict';

angular
    .module('app.layout')
    .controller('Shell', Shell);

function Shell() {
    /*jshint validthis: true */
    var vm = this;

    vm.push = push;

    activate();

    function activate() {
        vm.notifier.show('Loaded', 'info');
    }

    function push() {
        vm.notifier.show('Pushed', 'info');
    }

}
})();

My problem: If I click the button, I get the notifier. But, on loading, I get: TypeError: Cannot read property 'show' of undefined at activate (http://localhost:57624/app/layout/shell.controller.js:41:24) at new Shell (http://localhost:57624/app/layout/shell.controller.js:32:9)

I'm sure I'm missing something about the object state in Angular, but what am I missing that I cannot show this notification during the load phase of the controller?

Upvotes: 1

Views: 1278

Answers (1)

Lars H&#246;ppner
Lars H&#246;ppner

Reputation: 18402

When you're calling activate in the controller function, the Kendo UI widget has not been created yet. One solution to this is to use one of the global events Kendo UI has for this scenario (kendoRendered):

angular.module('app.layout', [ "kendo.directives" ])
    .controller('Shell', function ($scope) {       
        $scope.activate = function () {
            $scope.notifier.show('Loaded', 'info');
        };

        $scope.push = function () {
            $scope.notifier.show('Pushed', 'info');
        };

        $scope.$on("kendoRendered", function(event){
            $scope.activate();
        });
    }
);

(demo)

Upvotes: 1

Related Questions