如何通过angularjs服务让剑道通知工作

How to make Kendo notification work via angularjs service

本文关键字：通知 工作 何通过 angularjs 服务      更新时间：2023-09-26

我已经在angular服务中定义了剑道通知，但是下面这行抛出了一个错误uisservice .notify。error("您遗漏了一些必填字段。");错误是无法读取null属性'show'我怎样才能使它工作呢?

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


    }
}());

我在NotificationService中初始化了我的通知小部件，并用jQuery将它附加到body中。所以我可以确保总是只有一个小部件的实例，因为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服务中(它是typescript，但是对于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。就像@dimodi之前说的通知。

您需要将Notification小部件实例分配给svc.notification。您可以尝试在initNotifications()内部或之后这样做，或者通过使用kendoWidgetCreated处理程序。

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

相关文章：