Adding A New Element Into The DOM With Angularjs Does Not Initiate It

Explaining further, I am using angular-summernote and I am using a directive to insert new WYSIWYG editor instances inside of the DOM. However, when I insert it into the DOM, the

Solution 1:

What you are trying to do is fine, the element gets added to the DOM. But the issue is that the element that gets added needs attention from angular because it has a directive and it needs to be rendered in that manner. So you would need to re compile the element that you are adding using the $compile service. So after adding the element to the DOM you are basically compiling the element to render the directive and in the process attaching a respective scope to it.

.directive('addSummernote', ['$compile', function ($compile) {

    var template = '<summernote config="options" on-image-upload="imageUpload(files, editor, welEditable);"></summernote>';

    return function (scope, element, attrs) {

        element.click(function () {
            var elm = angular.element(template); //Get the element
            element.parent().find(".summernotes").append(elm); //Append it to DOM
            $compile(elm)(scope); //Now compile it to render the directive.            
        });

 }]);

Demo

Instead of binding the event manually you could just render the entire button as a directive with (replace option so that tha attributes on the directive on the mark up will be available in the rendered element as well.)

.directive('addSummernote', function ($compile) {

        var template = '<summernote config="options" on-image-upload="imageUpload(files, editor, welEditable);"></summernote>';

        return {
            restrict:'E',
            replace:true,
            template: '<input  type="submit"  value="Add 1+ Editor" ng-click="addEditor()">',
            link: function (scope, element, attrs) {

            //Click function handler 
            scope.addEditor = function(){
                   var elm = angular.element(template);
                   element.parent().find(".summernotes").append(elm);
                   //Or just do   element.prev().append(elm);
                   $compile(elm)(scope);    
              }

            }
        }
});

and use as:-

<add-summernote  id="append" class="btn bg-blue full-width" style="margin-top: 15px;"></add-summernote>

Demo