添加新的元素插入DOM与angularjs不启动它 [英] Adding a new element into the DOM with angularjs does not initiate it

问题描述

进一步解释，

我使用角summernote和我使用的是指令插入DOM内新的所见即所得的编辑器实例。然而，当我将其插入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：< STRONG> 的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>');
        })
    }
})

我怎样才能让这个它'听'到一个新的插入和正确加载编辑器？有没有更好的方式来做到这一点？我已经使用$手表尝试和$编译，但我怕我只是没有正确地使用它们。 ŧ

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。但问题在于，该被添加的元素需要从角度的注意，因为它有一个指令，它需要以这种方式来呈现。所以，你需要重新编译您正在使用的 $编译服务。所以之后加入的元素到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.            
        });

 }]);

演示

Demo

相反的结合事件手动你可以只使整个按钮与一个指令（以便塔上的标记上该指令将在呈现元件可以及属性替换选​​项。）

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);    
              }

            }
        }
});

和使用： -

and use as:-

<add-summernote  id="append" class="btn bg-blue full-width" style="margin-top: 15px;"></add-summernote>

演示

Demo

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