使用延迟加载服务

Question

我正在使用延迟加载实现来对一些最初不需要的js文件进行异步调用。我面临的问题是ckeditor。我正在使用angular ckeditor，因此使用lazyload服务加载ckeditor.js和angular.ckeditor.js。两个js正在被正确解析和添加。我还注入了所需的模块，但没有填充ckeditor。有没有办法在加载js文件后重新生成ckeditor？还有其他建议吗？提前谢谢。

我对async load ckeditor和angular.ckeditor.js进行了延迟加载服务。

.service('lazyLoad', ['$document', '$q', '$timeout', function ($document, $q, $timeout) {

    function loader(createElement) {
        var promises = {};

        return function (url) {
            if (typeof promises[url] === 'undefined') {
                var deferred = $q.defer();
                var element = createElement(url);

                element.onload = element.onreadystatechange = function (e) {
                    $timeout(function () {
                        deferred.resolve(e);
                    });
                };
                element.onerror = function (e) {
                    $timeout(function () {
                        deferred.reject(e);
                    });
                };

                promises[url] = deferred.promise;
            }

            return promises[url];
        };
    }


    this.loadScript = loader(function (src) {
        var script = $document[0].createElement('script');

        script.src = src;

        $document[0].body.appendChild(script);
        return script;
    });

}])

这是angular.ckeditor.js和ckeditor.js的服务。手动推送所需的'ckeditor'模块。

.service('ckeditorService', function($window, $q, lazyLoad) {
    this.CKEDITOR = function() {
        var deferred = $q.defer();

        if (typeof $window.CKEDITOR === "undefined") {
            lazyLoad.loadScript('bower_components/ckeditor/ckeditor.js').then(function() {
                lazyLoad.loadScript('bower_components/angular-ckeditor/angular-ckeditor.js').then(function() {
                    var app = angular.module('mainModule');
                    app.requires.push('ckeditor');
                    console.log('success loading : bower_components/angular-ckeditor/angular-ckeditor.js');

                    deferred.resolve($window.CKEDITOR);
                }).catch(function() {
                    console.log('Error loading : bower_components/angular-ckeditor/angular-ckeditor.js');
                    deferred.resolve($window.CKEDITOR);
                });

                //deferred.resolve($window.CKEDITOR);
            }).catch(function() {
                console.log('Error loading : bower_components/ckeditor/ckeditor.js');
                deferred.resolve($window.CKEDITOR);
            });
        } else {
            deferred.resolve($window.CKEDITOR);
        }

        return deferred.promise;
    };

});

这是调用服务的控制器。

.controller('productController', function (ckeditorService) {

     ckeditorService.CKEDITOR().then(function (CKEDITOR) {
       console.log('ckeditor loaded');
    });

})

Answer 1

您可以使用ngIf指令（文档here）。加载ckeditor时，它将重新创建指令的DOM部分;