Question

我已经在角度服务中定义了kendo通知，但是下面一行是抛出错误uiService.notify.error（“你错过了一些必填字段。”）; 错误是无法读取null的属性'show' 我怎样才能让它发挥作用？

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




    }
}());

Answer 1

我在NotificationService中初始化了我的通知小部件，并使用jQuery将其附加到正文。因此，我可以确保始终只有一个小部件实例，因为Kendos Doc说：

Using several Notification widget instances, which display notifications at
the same place on the page, is not recommended because the notifications from 
the multiple instances will overlap.

（比较http://docs.telerik.com/kendo-ui/controls/layout/notification/overview）

正如我发现的那样，如果您的小部件属性存在一些问题 - 在您的情况下是notifyOptions，例如 - 在窗口小部件初始化期间未定义。然后你的小部件将无声地失败。

所以我更喜欢使用html元素的id在服务中初始化通知小部件。如果给出，则它将引用HTML元素，否则它将创建一个默认值。

在您的服务init（其打字稿，但对于javascript只删除类型）：

// init dom element 
var temp = $("#" + notificationElementId);
var domElement: Element;
if (temp.length > 0) {
    domElement = temp[0];
} else {
    $("body").append('<span id="' + notificationElementId + '"></span>');
    domElement = $("#" + notificationElementId)[0];
}

// create notification widget (so you have the reference in your service)
this.notification = new kendo.ui.Notification(domElement, this.notificationOptions);

其他问题当然是绑定到控制器范围中的通知属性，但在服务中包含变量。所以你需要将它分配给svc.notification，因为@dimodi之前说过。

Answer 2

您需要将通知窗口小部件实例分配给svc.notification。您可以尝试在initNotifications()内或之后，或使用kendoWidgetCreated处理程序执行此操作。

http://docs.telerik.com/kendo-ui/AngularJS/global-events

如何通过angularjs服务使Kendo通知工作

2 个答案: