Question

我正在使用Bootstrap＆amp;创建一个表单。 AngularJS。我在我的页面中使用CK编辑器textarea。但是，当我的AngularJS控制器中很容易捕获输入文本字段的值时，我无法检索textarea的值。以下是代码段：

HTML页面

<div class="container">
    <div ng-controller="controller">
        <form role="form">

            <label for="sd"><b>Short Description: </b></label>

            <input ng-model="sdesc" class = "form-control input-xxlarge" type = "text" placeholder ="Provide a short description here."/>    

            <br/>
            <label for="dt"><b>Details: </b></label>

            <textarea ng-model="details" class="form-control" name="details_editor" id="details_editor"></textarea>

            <br/>

            <button class = "btn btn-primary" ng-click="submitted()">Ask It!</button>             

            <script>
                        CKEDITOR.replace('details_editor');
            </script>
        </form>
    </div>

<br/>
<hr>
</div>

JS

app.controller('controller', ['$scope', function($scope){
       $scope.submitted = function(){
           var sdesc = $scope.sdesc;
           var details = $scope.details;

           alert($scope.details);
       };
}]);

警报显示文本区域值undefined。

请帮我解决问题。

Answer 1

您正在使用CK编辑器的普通Javascript版本，因此Angular未收到通知以更新ng-model的{{1}}值。

基本上，Angular运行一个摘要周期来更新所有视图和模型，但是在这种情况下，CK编辑器中更改的值发生在Angular.s上下文之外，而不会更新textarea值。 / p>

为了解决这个问题，我们添加了一个小指令，并使用ng-model通知ng-model到Angular的更改。（我们也可以使用$timeout指令，但如果摘要周期已在进行中，它有时会失败。

示例指令：

$apply

删除，您的以下代码：

var app = angular.module("your-app-name", []);
app.directive("ckEditor", ["$timeout", function($timeout) {
    return {
        require: '?ngModel',
        link: function ($scope, element, attr, ngModelCtrl) {
            var editor = CKEDITOR.replace(element[0]);
            console.log(element[0], editor);

            editor.on("change", function() {
                $timeout(function() {
                    ngModelCtrl.$setViewValue(editor.getData());
                });
            });

            ngModelCtrl.$render = function (value) {
                editor.setData(ngModelCtrl.$modelValue);
            };
        }
    };
}]);

并修改文本编辑器，如：

<script>
    CKEDITOR.replace('details_editor');
</script>

AngularJS中文本区域的未定义值

1 个答案: