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 (, 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)

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

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

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.


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


app.controller("TemplateCtrl", function($scope) {
$scope.testFromCtrl = "TestFromCtrl Approved";

enter image description here


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';


.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: {
    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( $scope );


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



            var errorCallback = function(response){
                SweetAlert.swal("File not found", response.config.url + ": " +, "error");

            $http.get(path, {}).then(successCallback, errorCallback);


    link: function($scope, $element){