表单中有富文本时，Angularjs获取不到绑定数据的问题

最新推荐文章于 2023-05-29 19:07:59 发布

原创最新推荐文章于 2023-05-29 19:07:59 发布 · 2.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#angularjs #表单 #数据

javaweb 同时被 2 个专栏收录

8 篇文章

订阅专栏

javascript

5 篇文章

订阅专栏

本文讨论了在AngularJS中遇到的一个常见问题：当表单包含富文本编辑器时，如何正确地获取和绑定数据。通过深入探讨AngularJS的表单处理机制，我们将解释这个问题的原因，并提供解决方案，确保富文本内容能够被正确捕获和管理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

form表单

<form>
    <div class="tab-pane fade " id="mission">
        <textarea ui-tinymce="defaultTinymceOptions"
        ng-model="shipInfo.mission"></textarea>
    </div>
</form>

控制器

define(['angular','app','ztree', './jclst-res'], function(ng, app) {
  app.register.controller('info.jcmgr.jclst',['$scope', 'jclstRes','gritterService',function($scope,jclstRes,gritterService,orgUtil,jxUtil) {
var gritters = gritterService.Light(gritterService.Gritters);
$scope.add = function(){
                $scope.ship = {};
                $scope.shipInfo = {};
                $scope.addorgflag = true;
                $scope.editorgflag = false;
                $scope.jcEditor.visible = true;
            }
    $scope.jcEditor = {
                'title': '编辑信息',
                'iconClass': 'fa fa-laptop',
                'view': 'info.jcmgr.jcedit',
                'width': 900,
                'freeDom': true,//此处设置freedom为true，否则影响数据的绑定
                'height':520,
                'buttons': [
                    {
                   'buttonClass': 'btn-info btn-sm',
                   'iconClass':'fa fa-check-circle-o',
                   'text': '保存',
                   'onclick': function(jceditingForm) {
                        if (!jceditingForm.$valid) {
                            gritters.error({
                                'text':'无法保存，请检查表单内容。',
                                'title':'信息'
                            });
                            return;
                        }
                        var shipunion = {
                                'ship':$scope.ship,
                                'shipInfo':$scope.shipInfo
                        }
                        jclstRes.edit({},shipunion,function(e){
                            if(e.exception){
                                gritters.error({
                                    'title':'信息',
                                    'text':e.exception
                                });
                            }else{
                                gritters.success({
                                    'title': '信息',
                                    'text': '保存成功'
                                });
                                $scope.jcEditor.visible = false;
                                $scope.searchPage(1);
                            }
                        })
                   }
                },
                {
                    'buttonClass': 'btn-default btn-sm', 
                    'iconClass':'fa fa-times-circle-o',
                    'text': '关闭',
                    'onclick': function() {
                        $scope.jcEditor.visible = false;
                    }
                }]
            };
        }]);
})