Добавление нового элемента в DOM с помощью angularjs не инициирует его

Объясняя далее,

Я использую angular-summernote и использую директиву для вставки новых экземпляров редактора WYSIWYG внутри DOM. Однако, когда я вставляю его в DOM, новый редактор не загружается, возможно, потому, что инициализация уже запущена.

Вот директива, которую я использую, а также 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, но боюсь, что просто не использовал их должным образом. Т


javascript angularjs summernote angularjs-directive angularjs-scope
person Tiffany Lowe    schedule 01.09.2014    source источник
comment
нужно использовать $compile , см. угловые документы   -  person charlietfl    schedule 02.09.2014
comment
jsfiddle.net/pLL0pxqb/3 Поскольку вы добавляете новый элемент, вам нужно сообщить angular об этом это так, чтобы директива была перекомпилирована.   -  person PSL    schedule 02.09.2014
comment
@PSL ты дал мне ответ. Спасибо, ради ответа на этот вопрос, не могли бы вы объяснить это?   -  person Tiffany Lowe    schedule 02.09.2014
comment
@TiffanyLowe Конечно, я добавлю один   -  person PSL    schedule 02.09.2014

Ответы (1)


arrow_upward
4
arrow_downward

То, что вы пытаетесь сделать, в порядке, элемент добавляется в 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>

Демо

person PSL    schedule 01.09.2014
comment
Есть ли способ сделать это, если я просто push перейду к массиву в $scope и выведу элементы, используя ng-repeat? - person k102; 10.08.2015