添加新的元素到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