kendo-ui notification scope variable not set in Angular controller

北慕城南 提交于 2019-12-11 07:04:10

问题


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?


回答1:


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)



来源:https://stackoverflow.com/questions/28351417/kendo-ui-notification-scope-variable-not-set-in-angular-controller

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!