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

Question

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

到目前为止，用户可以将标题或富文本添加到他们的帖子中。我正在根据从后端检索到的内容信息来渲染这些组件，例如：

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

editable 指令如下所示：

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

这是网站在“查看”模式下的样子，并检查了 Summernote 的 HTML：

当点击“编辑”按钮时（右侧带有图标的黄色），第二行应该出现在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);
}