Question

我有一个像这样的自定义Kendo小部件：

var customWidget = widget.extend({
    options: {
        name: "MyCustomWidget"
    },

    init: function (element, options) {
        that = this;
        widget.fn.init.call(that, element, options);
    }
});
kendo.ui.plugin(customWidget);

我们假设我还有一个自定义angularjs服务，它提供了一些可重用的实用功能：

(function (ng) {
    ng.module('myApp').factory('myService', [], function () {
        var myRoutine = function(input) {
            return input * 5;
        };

        return {
            myRoutine: myRoutine
        };
    }]);
})(window.angular);

从小部件中的某个地方开始，假设为了init函数，我想使用我的angularjs服务来调用该实用程序函数。

我无法在生命周期中找到一个位置，其中可以足够早地定义kendo小部件，然后在我的标记中以声明方式使用，但这也允许我使用静态依赖项的某种上下文来自我的angularjs实现。

实现这一目标的最佳方法是什么？我是否有任何选项可以将我的angularjs服务静态注入到widget实现中，或者我必须将widget实现包装在angularjs指令中吗？

Answer 1

我从未在Angular SPA的上下文中创建Kendo小部件，但首先想到的选项是将小部件的创建包装在.run()块中。这样，您可以保证在执行依赖关系树期间的适当时间创建窗口小部件，但仍然需要评估指令或模板（可能需要窗口小部件）。

您可以像其他Angular组件一样将依赖项注入run()块。例如：

(function (ng) {

    ng.module('myApp').factory('myService', [], function () {
        var myRoutine = function(input) {
            return input * 5;
        };

        return {
            myRoutine: myRoutine
        };
    }]);

    ng.module('myApp').run(["myService", function (myService) {
        kendo.ui.plugin(widget.extend({
            options: {
                name: "MyCustomWidget"
            },

            init: function (element, options) {
                that = this;
                widget.fn.init.call(that, element, options);
                console.log(myService.myRoutine(10));
            }
        }));
    }]);

})(window.angular);

在自定义Kendo小部件中使用AngularJS服务的最佳方法是什么？

1 个答案: