2016-09-06 15 views
0

私は遅延読み込み実装を使用して、最初は不要ないくつかの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'); 
 
    }); 
 

 
})

答えて

0

あなたはngIfディレクティブ(ドキュメントhere)を使用することができます。 ckeditorがロードされると、ディレクティブのDOMの部分が再作成されます。

+0

私はこれを試しましたが運がまだありません。実際にはコンソールでインスタンスを取得していますが、CKEDITORはレンダリングされていません。 CKEDITORを再レンダリングする方法はありますか? –

関連する問題