Summernote – Insert template with angular directives

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

enter image description here

Answer

After all, I decided not to use the summernote-template plugin and implement my own way of inserting templates, using angular. Therefore, I created a directive that would be a button that inserted a given template.

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