你想要做的很好，元素被添加到 DOM.但问题是被添加的元素需要引起 angular 的注意，因为它有一个指令并且需要以这种方式呈现.因此，您需要使用 $compile 重新编译要添加的元素 服务.因此，在将元素添加到 DOM 之后，您基本上是在编译元素以呈现指令，并在此过程中为其附加相应的范围.

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

 }]);

演示

您可以将整个按钮作为指令呈现，而不是手动绑定事件(替换选项，以便标记上的指令上的属性也将在呈现的元素中可用.)

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

            }
        }
});

并用作:-

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

演示