添加新的元素插入DOM与angularjs不启动它

本文介绍了添加新的元素插入DOM与angularjs不启动它的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 进一步解释，我使用角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： 的jsfiddleHere 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: JSFiddleangular.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不启动它的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！