kendo-ui 未在 Angular 控制器中设置通知范围变量

kendo-ui notification scope variable not set in Angular controller

我注意到其他 kendo-ui 控件存在此问题,但我会特别询问 kendo-通知。我的 html 有:

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

在我的控制器中我有:

(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');
    }

}
})();

我的问题:如果我点击按钮,我会收到通知。但是,在加载时,我得到: 类型错误:无法读取未定义的 属性 'show' 在激活 (http://localhost:57624/app/layout/shell.controller.js:41:24) 在新 Shell (http://localhost:57624/app/layout/shell.controller.js:32:9)

我确定我在 Angular 中遗漏了一些关于对象状态的信息,但是我遗漏了什么我无法在控制器的加载阶段显示此通知?

当您在控制器函数中调用 activate 时,Kendo UI 小部件尚未创建。一种解决方案是使用 Kendo UI 针对此场景 (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)