javascript - Summernote - 插入带有 Angular Directive(指令)的模板

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 文件创建了一个 Controller ，并且 Controller 中的数据未显示。

模板1.html

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

模板Ctrl.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){
    }
};
}]);