使用 angularjs 添加新元素到 DOM 中并不会启动它

进一步解释，

我正在使用 angular-summernote 并使用指令在 DOM 内插入新的所见即所得编辑器实例。然而，当我将它插入到 DOM 中时，新编辑器不会加载，可能是因为 init 已经被触发了。

这是我正在使用的指令，以及有效的 jsFiddle，它does插入编辑器标签但是它does not生成/启动另一个编辑器：JSFiddle http://jsfiddle.net/thedarklord1939/pLL0pxqb/2/

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

我怎样才能让它“监听”新的插入并正确加载编辑器？有一个更好的方法吗？我尝试过使用 $watch 和 $compile 但恐怕我没有正确使用它们。时间

你想要做的很好，元素被添加到 DOM 中。但问题是，添加的元素需要 Angular 的关注，因为它有一个指令，并且需要以这种方式呈现。因此，您需要使用以下命令重新编译要添加的元素$compile service https://docs.angularjs.org/api/ng/service/%24compile。因此，将元素添加到 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 http://jsfiddle.net/1rsvbjzj/

您可以将整个按钮渲染为指令，而不是手动绑定事件（替换选项，以便标记上的指令上的属性也将在渲染的元素中可用。）

.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 http://jsfiddle.net/1rsvbjzj/5/