Lazy loading external scripts inside controller or link function: angular, requirejs

Question

I am trying to lazy load the external script (in my case ckeditor) in a directive only when its needed.

HTML Template - directives/myEditor.tmplt

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

       This is my textarea to be replaced with CKEditor.

   </textarea>
</div>

Angular Module - 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;
});

I have some doubts

1. is it safe to load scripts like this inside controller or link function ?
2. do i have to trigger $apply or $digest inside CKEditor's require callback function ?
3. is there any better and cleaner way of doing this kind of lazy loading ?

Answer 1

For third party resources, it's usually best to include this is as script in your page on the bottom of the body. Looks like ckeditor has actually created a bower package, so I would recommend just using the bower package as it will be strapped in the same way: http://docs.ckeditor.com/#!/guide/dev_package_managers.

This way, you do not have to $digest or wait for the ckeditor script to load. Is there a reason you only want to load it on this page? There are ways to insert the script element on the page, but it's best to stay away from that type of DOM manipulation with Angular.