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

Question

进一步解释，

我正在使用 angular-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 但恐怕我没有正确使用它们。

Answer 1

您正在尝试做的很好，元素被添加到 DOM 中。但问题是添加的元素需要从 Angular 上注意，因为它有一个指令并且需要以这种方式呈现。因此，您需要使用 $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

无需手动绑定(bind)事件，您只需将整个按钮渲染为一个指令(替换选项，以便标记上的指令上的属性也将在呈现的元素中可用。)

.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