How to use the Angular directive enclosed in a CKEditor widget

Question

We use Angular directives to render data in CKEditor for the project. I created a widget that uses the directive as a template, but it does not display anything in the field. Please, help! Thank you in advance!

Widget Source:

CKEDITOR.plugins.add('grid', {
requires: 'widget',
init: function(editor) {

    editor.widgets.add('grid', {
        template: '<div class="widget"> <div table-Directive></div> </div>',
        upcast: function(element) {
            return (element.name == 'div' && element.hasClass('widget'));
        },
        allowedContent: 'div[*]'
    });

    editor.ui.addButton('grid', {
        label: 'Demo',
        command: 'grid',
    });
}

});

Directive Source:

define(['angular','js/controller/table-controller'],
  function(angular) {
  'use strict';

  angular
   .module('todoApp.table-directive', ['todoApp.table-controller'])
   .directive('tableDirective', [tableDirective]);

 function tableDirective() {
   var directive = {
     controller: 'TableController',
     templateUrl: 'template/tableDirective.html',
   };
   return directive;
 }
});

Edit: In fact, you can use the Angular component inside ckeditor, you just need to compile it yourself using compilation. Here I am attaching a simple code illustrating

// temporarily remove data-widget attribute sets by CKEditor before $compile()
// because angular thinks that data-widget is the same directive as widget
// and applies the directive twice
var dataWidget = element.getAttribute('data-widget');
element.removeAttribute('data-widget');
// use the scope of the closest parent that has a scope
var editorScope = $(editor.container.$).closest('.idoc-editor').isolateScope();
var compiledElement = application.$compile(element)(editorScope);
// $compile replaces the compiled element (instead of only decorating it)
// and this breaks the base CKEditor widget (this.element doesn't point to the
// correct element after $compile
this.element = new CKEDITOR.dom.node(compiledElement[0]);
this.element.$.setAttribute('data-widget', dataWidget);

Answer 1

, angular js- ckeditor, ckeditor iframe, angular iframe.

ckeditor ajax- .