Неопределенное значение из области текста в AngularJS

Question

Я создаю одну форму с помощью Bootstrap & AngularJS. Я использую редактор CK на своей странице как textarea. Но я не могу получить значение textarea, в то время как значение входного текстового поля легко фиксируется в моем контроллере AngularJS. Ниже приведен фрагмент кода:

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 этого textarea.

В основном, Angular запускает цикл дайджеста для обновления всех видов и моделей, но поскольку в этом случае значения, которые изменяются в редакторе CK, происходят за пределами контекста Angular.s, который не обновляет значение ng-model.

Чтобы исправить это, мы добавили небольшую директиву и уведомили об изменении в ng-model Угловому с помощью $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> 

И, измените свой текстовый редактор следующим образом:

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

Answer 2

Я нашел ng-ckeditor для реализовать ckeditor в angularjs. См. Это: https://github.com/esvit/ng-ckeditor. Я попробовал это, легко реализовать и работать как ожидалось