Question

我有这个指令：

/*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尝试创建编辑器实例时，它找不到具有dinamycally生成的id属性的元素。

Answer 1

猜猜，但你可以试试这个：

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

Answer 2

问题是CkEditor无法找到该元素，因为该元素的id未在DOM中设置。所以我依靠jQuery来设置de element DOM属性，以便CkEditor可以找到textarea。我在PostLink函数中改变了这个

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

到此：

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

现在一切正常

angular js指令post link无法访问生成的元素id

2 个答案: