3

进一步解释，

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

4

1 回答 1

4

你想做的很好，元素被添加到 DOM 中。但问题是添加的元素需要 Angular 的关注，因为它有一个指令并且需要以这种方式呈现。因此，您需要重新编译使用$compile服务添加的元素。因此，在将元素添加到 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.            
        });

 }]);

演示

除了手动绑定事件之外，您还可以将整个按钮呈现为一个指令（替换选项，以便标记上的指令上的属性也可以在呈现的元素中使用。）

.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>

演示

于 2014-09-01T23:38:02.930 回答