在指令内编译另一个指令不起作用

Question

我正在开发一个博客网站，目前正在开发一个博文创建者。在提交帖子之前，帖子创建者最终将允许用户在他们的帖子中添加HTML元素并在需要时对其进行编辑。

到目前为止，用户可以将标题或富文本添加到他们的帖子。我工作的基础上从后端检索的内容信息呈现这些组件，例如：

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

可编辑的指令如下所示：

(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; 
      } 
     } 
     } 
    } 
    } 
}()); 

模板如下所示：

<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> 

这里的网站看起来像在“视图”模式下，视察了HTML的summernote：

当“编辑”按钮被点击（黄色之一，与图标右侧），第二行应该出现在summernote编辑，但编辑一直没有出现：

我注意到，编译后绝不会插入summernote编辑器（您会发现它在开发人员工具/元素检查器中不存在）。也许这是问题？如果是这样，有没有办法解决它？

P.S .:我可以根据要求创建一个Plunkr。

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