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>

以下是网站在“查看”模式下的样子，并检查了夏令营的HTML：

View Mode

单击“编辑”按钮时（右侧带有图标的黄色按钮），第二行应显示在summernote编辑器中，但编辑器从不显示：

Edit Mode

我注意到编译后从未插入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);
}

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

1 个答案: