私は遅延読み込み実装を使用して、最初は不要ないくつかのjsファイルを非同期呼び出ししています。私は直面している問題はckeditorです。 angular ckeditorを使用しているので、cazeditor.jsとangular.ckeditor.jsの両方がlazyloadサービスを使用してロードされています。両方のjが解決され、正しく追加されています。私も必要なモジュールを注入しましたが、ckeditorは実装されていません。 jsファイルがロードされた後にckeditorを再生成する方法はありますか?他の提案はありますか?前もって感謝します。lazyloadサービスを使用した非同期ロード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');
});
})
私はこれを試しましたが運がまだありません。実際にはコンソールでインスタンスを取得していますが、CKEDITORはレンダリングされていません。 CKEDITORを再レンダリングする方法はありますか? –