usman usman - 3 months ago 49
AngularJS Question

Model values are not binding with editor Angularjs

My text editor model value is not binding which is of type textarea as well, and I have html formatted text in it. When I call my save method, this editor's model variable is null. I am not able to understand why this is happening as model with simple input type text is working fine, what could be the issue with the text editors model. Following is my code kindly have a look at this, may be I am doing something wrong.

<div class="col-md-12">
<div class="form-group">
<input type="text" ng-model="TemplateName" class="form-control" placeholder="Enter Template Name">
</div>
<div class="form-group">
<textarea cols="18" rows="40" class="wysihtml5 wysihtml5-min form-control" id="templateDescription" ng-bind-html="TemplateDescription" placeholder="Enter Agreement Template ..." ></textarea>
</div>
</div>


And this is my controller code:

$scope.Template = {
Name: $scope.TemplateName,
Description: $scope.TemplateDescription,
};

var promisePost = templateService.post($scope.Template);
promisePost.then(function (pl) {

//success message

}, function (err) {

//error message

});

Answer

You should use ng-model and bind it directly to Template.Description

HTML

<div ng-app>
  <div ng-controller="sampleCtrl">
    <textarea cols="18" rows="40" class="wysihtml5 wysihtml5-min form-control" id="templateDescription" ng-model="Template.Description" placeholder="Enter Agreement Template ..."></textarea>
    {{Template.Description}}
  </div>
</div>

Controller

function sampleCtrl($scope) {
  $scope.Template = {
    Description: ''
  };
}

See this fiddle for your reference