使用 angularjs 向 DOM 添加新元素不会启动它 [英] Adding a new element into the DOM with angularjs does not initiate it

问题描述

进一步解释，

我正在使用 angular-summernote 并且我正在使用指令在 DOM 内插入新的 WYSIWYG 编辑器实例.但是，当我将它插入到 DOM 中时，新编辑器没有加载，可能是因为 init 已经被触发了.

I am using angular-summernote and I am using a directive to insert new WYSIWYG editor instances inside of the DOM. However, when I insert it into the DOM, the new editor does not load maybe because the init has already been fired.

这是我正在使用的指令，以及一个有效的 jsFiddle，它确实插入编辑器标签但它不生成/启动另一个编辑器:<强>JSFiddle

Here is the directive I am using, as well as a jsFiddle that works, it does insert the editor tags but it does not generate/start another editor: 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 但恐怕我只是没有正确使用它们.

How can I make it so that it 'listens' to a new insert and load the editor properly? Is there a better way to do this? I've tried using $watch and $compile but I am afraid I just did not use them properly. T

推荐答案

你想要做的很好，元素被添加到 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>

演示

这篇关于使用 angularjs 向 DOM 添加新元素不会启动它的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！