Compiling Another Directive inside a Directive not working

Question

I'm developing a blog website and currently working on a post creator. The post creator will eventually allow a user to add HTML elements to their post and edit them when needed, before submitting the post.

So far, a user can add a Header or Rich Text to their post. I'm working on rendering these components based on content information retrieved from the backend, as such:

<div ng-repeat="component in components track by $index">
    <editable type="component.type" model="component.content"></editable>
</div>

The editable directive looks like the following:

(function() {
  'use strict';

  angular.module('blog')
    .directive('editable', directive);

  directive.$inject = ['$compile'];
  function directive($compile) {
    return {
      restrict: 'E',
      templateUrl: 'components/editable/editable.html',
      scope: {
        type: '=',
        model: '='
      },
      link: function(scope, element) {
        scope.editing = false;
        scope.currentModel = scope.model;

        var viewTemplate, editTemplate;
        switch(scope.type) {
          case 'header':
            viewTemplate = '<h2 ng-show="!editing">{{currentModel}}</h2>';
            editTemplate = '<input ng-show="editing" type="text" class="form-control" ng-model="model">';
            compileTemplate(viewTemplate, editTemplate);
            break;
          case 'richtext':
            viewTemplate = '<div ng-show="!editing">{{currentModel}}</div>';
            editTemplate = '<summernote ng-show="editing" ng-model="model" height="300"></summernote>';
            compileTemplate(viewTemplate, editTemplate);
            break;
          default:
            break;
        }

        function compileTemplate(viewTemplate, editTemplate) {
            var viewTemplateCompiled, editTemplateCompiled;
            viewTemplateCompiled = $compile(angular.element(viewTemplate))(scope);
            editTemplateCompiled = $compile(angular.element(editTemplate))(scope);
            element.find('view').replaceWith(viewTemplateCompiled);
            element.find('edit').replaceWith(editTemplateCompiled);
        }

        scope.toggleEditMode = function(saveChanges) {
          scope.editing = !scope.editing;
          if (saveChanges) {
            scope.currentModel = scope.model;
          }
        }
      }
    }
  }
}());

The template looks like the following:

<div class="row">
  <div class="col-md-8">
    <view></view>
    <edit></edit>
  </div>
  <div class="col-md-4">
    <span class="pull-right">
      <button ng-show="editing" class="btn btn-success" ng-click="toggleEditMode(true)"><span class="glyphicon glyphicon-ok"></span></button>
      <button ng-show="editing" class="btn btn-danger" ng-click="toggleEditMode(false)"><span class="glyphicon glyphicon-remove"></span></button>
      <button ng-show="!editing" class="btn btn-warning" ng-click="toggleEditMode(true)"><span class="glyphicon glyphicon-edit"></span></button>
    </span>
  </div>
</div>

Here's how the website looks like in "view" mode, with the HTML for summernote inspected:

When the "edit" button is clicked (yellow one on the right with the icon), The second line should appear in a summernote editor, but the editor never shows up:

I've noticed that the summernote editor is never inserted after compiling (you'll see that it's not there in the developer tools/element inspector). Perhaps this is the issue? If so, is there a way to fix it?

P.S.: I can create a Plunkr on request.

Answer 1

function compileTemplate(viewTemplate, editTemplate) {
    var viewTemplateCompiled = angular.element(viewTemplate),
        editTemplateCompiled = angular.element(editTemplate);

    element.find('view').replaceWith(viewTemplateCompiled);
    element.find('edit').replaceWith(editTemplateCompiled);

    $compile(viewTemplateCompiled)(scope);
    $compile(editTemplateCompiled)(scope);
}