模型值未与编辑器 Angularjs 绑定答案

【问题标题】：Model values are not binding with editor Angularjs模型值未与编辑器 Angularjs 绑定
【发布时间】：2016-08-15 05:48:37
【问题描述】：

我的文本编辑器模型值也不是 textarea 类型的绑定，并且我在其中包含 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-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

            });

【问题讨论】：

什么不完全绑定。 “模板名称”或“模板描述”

标签： angularjs

【解决方案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 以供参考

【讨论】：

感谢您抽出宝贵的时间，但这对我不起作用，因为它也包含原始 html，因此它给了我未定义的模型。
你能创建一个小提琴来显示你在说什么吗？
你的回答也有帮助，终于抓住了这个问题，编辑脚本毁了所有人，

【解决方案2】：

是的，使用ng-model 进行绑定

html 为

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

【讨论】：

我的编辑器包含原始 html，这返回我未定义
我检查了，它的绑定。不知道你的确切问题是什么

【解决方案3】：

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

【讨论】：