Question

我只是在需要的时候在一个指令中试图延迟加载外部脚本（在我的情况下是ckeditor）。

HTML模板 - directives/myEditor.tmplt

<div>
   <textarea name="editor1" id="editor1" rows="10" cols="80">

       This is my textarea to be replaced with CKEditor.

   </textarea>
</div>

角度模块 - MyEditorModule

define(['angular'], function(angular){

   var moduleName = 'MyEditorModule';

   angular
          .module(moduleName)
          .directive('myEditor',function($scope){
             return {
                 restrict: 'E',
                 templateUrl: 'directives/myEditor.tmplt',
                 link: function(scope, element){

                     scope.CKEDIOTR_LOADED = false;

                     require([
                        'https://cdn.ckeditor.com/4.4.7/standard/ckeditor'
                     ], function(){

                          scope.CKEDIOTR_LOADED = true;
                          CKEDITOR.replace('editor1');

                          /**
                           *  Registering other actions for CKEDITOR     
                           *
                           **/

                     });
                 }
             };
          });

   return moduleName;
});

我有些怀疑

在控制器或链接功能中加载这样的脚本是否安全？
我是否必须在CKEditor的require回调函数中触发$ apply或$ digest？
有没有更好更干净的方法来做这种懒惰的装载？

Answer 1

对于第三方资源，通常最好将其包含在页面底部的脚本中。看起来ckeditor实际上已经创建了一个bower包，所以我建议只使用bower包，因为它将以相同的方式绑定：http://docs.ckeditor.com/#!/guide/dev_package_managers。

这样，您无需$ digest或等待加载ckeditor脚本。您是否只想在此页面上加载它？有一些方法可以在页面上插入脚本元素，但最好使用Angular远离那种类型的DOM操作。

延迟加载控制器或链接函数内的外部脚本：angular，requirejs

1 个答案: