ссылка на директиву angular js не может получить доступ к сгенерированному идентификатору элемента

0

У меня есть эта директива:

/*html, enclosed in a ng-repeat directive*/
<textarea name="alternativaHtml" id="questao_alternativa_{{$index}}" data-ng-model="alternativa.TextoHtml" data-ck-editor></textarea>

/*javascript*/
angular
    .module("fluxo_itens.directives")
    .directive('ckEditor', [function () {
            return {
                require: '?ngModel',
                link: {
                    "post": PostLink
                }
            };
        }]);

function PostLink($scope, elm, attr, ngModel) {
    var ck = CKEDITOR.replace(attr.id);

    ck.on('pasteState', function () {
        $scope.$apply(function () {
            ngModel.$setViewValue(ck.getData());
        });
    });

    ngModel.$render = function (value) {
        ck.setData(ngModel.$modelValue);
    };
}

проблема в том, что, когда CKEDITOR пытается создать экземпляр редактора, он не может найти элемент, у которого есть свойство id, генерируемое динамически.

Теги:
ckeditor

2 ответа

0

Проблема заключалась в том, что CkEditor не смог найти элемент, потому что идентификатор элемента не был установлен в DOM. Поэтому я полагался на jQuery, чтобы установить свойство элемента DOM, чтобы CkEditor мог найти текстовое поле. Я изменил это в функции PostLink

var ck = CKEDITOR.replace(attr.id);

к этому:

$(elm).attr("id", attr.id).prop("id", attr.id);
var ck = CKEDITOR.replace(elm[0].id);

Теперь все работает нормально

Поделиться
0

Просто гадать, но вы можете попробовать это:

<textarea name="alternativaHtml" id="questao_alternativa_{{$index}}" data-ng-model="alternativa.TextoHtml" data-ck-editor editor-id="questao_alternativa_{{$index}}"></textarea>

директива

angular
.module("fluxo_itens.directives")
.directive('ckEditor', [function () {
        return {
            scope : {
             'editorId' : '='
            }
            require: '?ngModel',
            link: {
                "post": PostLink
            }
        };
    }]);

PostLink

function PostLink($scope, elm, attr, ngModel) {
var ck = CKEDITOR.replace($scope.editorId);

ck.on('pasteState', function () {
    $scope.$apply(function () {
        ngModel.$setViewValue(ck.getData());
    });
});

ngModel.$render = function (value) {
    ck.setData(ngModel.$modelValue);
};
}
Поделиться
  • 0
    попробовал ваше решение, но оно не работает вообще
  • 0
    он выдает: Синтаксическая ошибка: токен '{' является неожиданным токеном в столбце 21 выражения [Questao_alternativa _ {{$ index}}], начиная с [{{$ index}}].
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню