Добавление нового элемента в DOM с angularjs не инициируют ее

Question

Объясняя дальше,

Я использую угловой-summernote и я использую директиву для вставки новых экземпляров визуального редактора внутренней части DOM. Однако, когда я вставляю его в DOM, новый редактор не загружается, возможно, потому что init уже запущен.

Вот директива я использую, а также jsFiddle, который работает, он делает вставки тэгов, но не генерировать/запуска другого редактора: JSFiddle

angular.module('summernoteDemo', ['summernote']) 
    .directive('addSummernote', function() { 
    return function (scope, element, attrs) { 
     element.click(function() { 
      element.parent().find(".summernotes").append('<summernote></summernote>'); 
     }) 
    } 
}) 

Как я могу сделать так, чтобы он «прослушивал» новую вставку и правильно загружал редактор? Есть ли лучший способ сделать это? Я пробовал использовать $ watch и $ compile, но я боюсь, что я просто не использовал их правильно. T

Answer 1

То, что вы пытаетесь сделать, прекрасно, элемент добавляется в DOM. Но проблема в том, что элемент, который добавляется, требует внимания от углового, потому что он имеет директиву и его нужно визуализировать таким образом. Поэтому вам нужно будет скомпилировать элемент, который вы добавляете, используя $compile service. Поэтому после добавления элемента в DOM вы в основном компилируете элемент для визуализации директивы и в процессе прикрепления к нему соответствующей области.

.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

Вместо связывания события вручную, вы могли бы просто вынести кнопку все как директива с (замените параметр, чтобы тх атрибуты директивы на размечать будет доступны в оказываемых элемент, а)

.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> 

Demo