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

Question

我正在开发一个博客网站，目前正在开发 post 创建者。 post 创建者最终将允许用户将 HTML 元素添加到他们的 post 并在需要时编辑它们，然后再提交 post.

到目前为止，用户可以向其 post 添加页眉或富文本。我正在根据从后端检索到的内容信息来渲染这些组件，例如：

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

以下是网站在 "view" 模式下的样子，检查了 HTML for summernote：

当点击"edit"按钮时（右侧带有图标的黄色按钮），第二行应该出现在summernote编辑器中，但编辑器永远不会出现：

我注意到 summernote 编辑器在编译后从未被插入（你会发现它不存在于开发人员 tools/element 检查器中）。也许这就是问题所在？如果是这样，有没有办法解决它？

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

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

Compiling Another Directive inside a Directive not working

angularjs

angularjs-directive

summernote