模型值不与编辑器Angularjs绑定

时间:2016-08-15 05:48:38

标签: angularjs

我的文本编辑器模型值不是绑定,也是textarea类型,我有html格式的文本。当我调用我的save方法时,这个编辑器的模型变量为null。我无法理解为什么会发生这种情况,因为具有简单输入类型文本的模型工作正常,文本编辑器模型可能存在问题。以下是我的代码,好好看看这个,可能是我做错了。

<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>

这是我的控制器代码:

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

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

                //success message

            }, function (err) {

                //error message

            });

3 个答案:

答案 0 :(得分:1)

您应该使用ng-model并将其直接绑定到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>

<强>控制器

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

请参阅this fiddle以供参考

答案 1 :(得分:1)

是使用ng-model进行绑定

html as

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" 
  ng-model='TemplateDescription' // add ng-model
  placeholder="Enter Agreement Template ..."></textarea>
</div>

这是plnkr link

答案 2 :(得分:0)

使用ng-model代替ng-bing-html

<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-model="TemplateDescription" 
      placeholder="Enter Agreement Template ..." ></textarea>
    </div>
 </div>

检查我的笔http://codepen.io/keephacking/pen/kXVjOX?editors=1010