Summernote - 插入带有角度指令的模板

Question

我打算创建一个文本编辑器，用户可以在其中使用 AngularJS 指令构建自己的 html 页面。我发现了 Summernote 模板插件 (https://github.com/Nanakii/summernote-plugins/tree/master/plugin/template)，它适用于常规 html，但不能正确插入包含给定参数的 AngularJS 指令。

这是一个演示该问题的小型 plunker 项目。我已经使用了原始和 angularjs-wrap summernotes，您可以看到不同的行为。我的目标是能够以显示给定数据（StringData 和 ObjectValue）的方式插入“模板 1”

https://plnkr.co/edit/asKUJj2Mg4HnMASVHV7f?p=info

Index.html - 通用的 Angular 语法以及指令

  <div id="summernote">
      <h3>Using jQuery</h3>
      {{2+2}}
      {{testFromCtrl}}
      <mydirective vdata="StringData" vobj="{value: 'Object Value'}"></mydirective>
  </div>

但是，一旦我尝试使用模板插入系统，vdata 和 vobj 属性就不会显示。另外，我为 template1.html 文件创建了一个控制器，并且没有显示来自控制器的数据。

模板1.html

{{testFromCtrl}} My Directive:
 <mydirective vdata="StringData" vobj="{value: 'Object Value'}"></mydirective>
</div>

TemplateCtrl.js

app.controller("TemplateCtrl", function($scope) {
$scope.testFromCtrl = "TestFromCtrl Approved";
});

Answer 1

毕竟，我决定不使用 summernote-template 插件，而是使用 angular 实现我自己的插入模板的方式。因此，我创建了一个指令，它是一个插入给定模板的按钮。

'use strict';

angular.module('myApp.userItems.insert', 
['oitozero.ngSweetAlert'])


.directive("fccpinsert", [ '$parse', 'SweetAlert', '$timeout' , function($parse, SweetAlert) {
var template = 
'<button class="btn btn-primary waves-effect" ng-click="insert($event)">Insert directive</button>';


return {
    restrict: "E",
    replace: true,
    scope: {
        vdata:'='
    },
    template: template,

    controller: ['$scope', '$http', '$compile', '$element', function($scope, $http, $compile, $element) {

        // Root path towards templates folder
        $scope.prefix = "views/summernote/tpls/";

        // Inserts directive into the text field
        $scope.insert = function(event){
            var filename = "template1";

            var path = $scope.prefix + filename + ".html";

            // If template is found
            var successCallback = function(response){

                var tpl = $compile(response.data)( $scope );
                console.log(tpl);

                $element.append(tpl);

                //class is : note-editable panel-body
                var documentResult = document.getElementsByClassName("note-editable panel-body");
                console.log('document.getElementsByClassName: ', documentResult);

                var wrappedDocumentResult = angular.element(documentResult);
                console.log('angular.element: ', wrappedDocumentResult);

                wrappedDocumentResult.append(tpl);


            };  

            var errorCallback = function(response){
                console.log(response);
                SweetAlert.swal("File not found", response.config.url + ": " + response.data, "error");
            };

            $http.get(path, {}).then(successCallback, errorCallback);




        };
    }],

    link: function($scope, $element){
    }
};
}]);

Answer 2

回答“Summernote - 插入带有角度指令的模板”的问题。

我的用例是在 Summernote 中设置一个模板（HTML 代码），该模板的主体内有一个 AngularJS 指令。该指令是 ng-repeat 循环通过一个动态变量。

问题是 Summernote 不编译 AngularJs 代码。

我的解决方案是在编辑器之外编译要在 Summernote 中使用的模板，然后使用最外层标签的 id 将编译后的代码拉入 Summernote。

为此，我使用了 ng-hide 指令，以便在 DOM 上编译模板但不显示。 （不要使用 ng-if，因为它不会加载到 DOM 上）。

例如：

HTML

         <div ng-hide="hideAccepted" id="letterAccepted">
           <div ng-repeat="object in clauseIdPayload.combinedIDs track by $index> {{object}}</div>
</div>

在页面启动时将隐藏设置为 false 并且一次
JS

   $scope.html = document.getElementById("letterAccepted");
        $(document).ready(function () {
            var $note = $('.summernote-container').summernote({
                height: 500,
                callbacks: {
                    onChange: function (code, $editable) {
                        console.log('onChange:', code);

                        $scope.outcome.html = code;

                        $scope.outcome.html.toString();
                    }
                },
                toolbar: [
                    ['style', ['style']],
                    ['font', ['bold', 'italic', 'underline', 'strikethrough', 'superscript', 'subscript', 'clear']],
                    ['fontname', ['fontname']],
                    ['fontsize', ['fontsize']],
                    ['color', ['color']],
                    ['para', ['ol', 'ul', 'paragraph', 'height']],
                    ['table', ['table']],
                    ['view', ['undo', 'redo', 'codeview']]
                ]
            });



            $note.summernote('code', $scope.html);


        });
        // SUMMERNOTE

要解决上述问题，您可以在 Summernote 之外创建一个模板选择，并根据该条件分配给我上面使用的 $scope.html（if -else 语句）变量。例如

  if($scope.tpaInstructionsPayload.claimOutcome === 'Approved'){
            console.log("accepted")
            $scope.html = document.getElementById("letterAccepted");
     
        } else if($scope.tpaInstructionsPayload.claimOutcome === 'Partial Approved') {
            console.log("partial")

            $scope.html = document.getElementById("letterPartial");
           
        }else {
            $scope.html = document.getElementById("letterDeny");
           


        }