Question

I am planning to create a text editor, where users can build their own html pages by using AngularJS directives. I've found out about the summernote template plugin (https://github.com/Nanakii/summernote-plugins/tree/master/plugin/template), which works great for regular html, but doesn't correctly insert the AngularJS directives that contain given parameters.

Here's a small plunker project that demonstrates the issue. I've used both the original and angularjs-wrap summernotes and you can see the different behaviour. My aim is to be able to insert "Template 1" in such a way that it shows the given data (StringData and ObjectValue)

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

Index.html - General angular syntax works, as well as directive

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

However, once I try using the template insert system the vdata and vobj attributes are not shown. Also, I created a controller for the template1.html file and data from the controller isn't shown.

Template1.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实现我自己的插入模板的方式。因此，我创建了一个指令，它是一个插入给定模板的按钮。

1BD97LZlG5qxVHyvPvZ-i_mahh-yUPuFCG2ZW4yhN8vs

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


        }

Summernote - Insert template with angular directives

2 个答案: