Summernote - 角度指示文を含むテンプレートを挿入する

Question

ユーザーは、AngularJS指示文を使用して独自のhtmlページを作成できるテキストエディタを作成する予定です。私は通常のhtmlにはうまくいくが、与えられたパラメータを含むAngularJSディレクティブを正しく挿入しないsummernoteテンプレートプラグイン（https://github.com/Nanakii/summernote-plugins/tree/master/plugin/template）について知りました。

ここに、問題を示す小さなプランナープロジェクトがあります。私は原文と角括弧の両方のsummernotesを使用して、あなたは異なる動作を見ることができます。ディレクティブ

だけでなく、一般的な角度構文作品、 - それは、与えられたデータ（StringDataとObjectValue）

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

Index.htmlとを示していることを私の目的は、このような方法で、「テンプレート1」を挿入することができることです

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

はしかし、かつて私は属性が示されていないVDATAとvobjをテンプレートインサートシステムを使用してみてください。また、template1.htmlファイル用のコントローラを作成しましたが、コントローラからのデータは表示されません。結局のところ

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テンプレートプラグインを使用して挿入する私の自身の方法を実装しないことに決めましたテンプレート、角を使用します。したがって、私は与えられたテンプレートを挿入するボタンとなる指示文を作成しました。

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