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

我计划创建一个文本编辑器，用户可以使用AngularJS指令构建自己的html页面。我已经了解了summernote模板插件（），它对常规html非常有效，但没有正确插入包含给定参数的AngularJS指令

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

html-通用角度语法以及指令

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

---

毕竟，我决定不使用summernote模板插件，而是使用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){
    }
};
}]);

“严格使用”；
angular.module（'myApp.userItems.insert'，
['oitozero.ngSweetAlert']）
.directive（“fccpinsert”、[“$parse”、“SweetAlert”、“$timeout”、函数（$parse、SweetAlert）{
变量模板=
“插入指令”；
返回{
限制：“E”，
替换：正确，
范围：{
vdata:“=”
},
模板：模板，
控制器：['$scope'，'$http'，'$compile'，'$element'，函数（$scope，$http，$compile，$element）{
//模板文件夹的根路径
$scope.prefix=“视图/summernote/tpls/”；
//在文本字段中插入指令
$scope.insert=函数（事件）{
var filename=“template1”；
var path=$scope.prefix+filename+“.html”；
//如果找到模板
var successCallback=函数（响应）{
var tpl=$compile（response.data）（$scope）；
控制台日志（tpl）；
$element.append（tpl）；
//类为：注释可编辑面板体
var documentResult=document.getElementsByClassName（“注释可编辑面板体”）；
log（'document.getElementsByClassName:'，documentResult）；
var wrappedodocumentresult=angular.element（documentResult）；
log（'angular.element:'，wrappedDocumentResult）；
wrappedDocumentResult.append（第三方物流）；
};  
var errorCallback=函数（响应）{
控制台日志（响应）；
SweetAlert.swal（“未找到文件，response.config.url+”：“+response.data，错误”）；
};
$http.get（路径，{}）.then（successCallback，errorCallback）；
};
}],
链接：函数（$scope$element）{
}
};
}]);

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

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

问题是Summernote不编译AngularJs代码

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

我使用了一个nghide指令，以便在DOM上编译模板，但不显示。（如果没有加载到DOM上，请不要使用ng）

例如：

HTML

为了解决上述问题，您可以在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");
           


        }

'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){
    }
};
}]);

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

   $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

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


        }