使用 Angularjs 和 Mongoose (meanjs) 创建子文档并保存值

Posted 2023-03-11

【中文标题】使用 Angularjs 和 Mongoose (meanjs) 创建子文档并保存值

【英文标题】：Create subdocument and save value with Angularjs and Mongoose (meanjs)

【发布时间】：2014-11-08 10:24:27

【问题描述】：

我正在尝试向 'twitter' 键添加一个值，该键是一个子文档 'social'，在控制器中具有：this.social.twitter。使用它会中断表单提交，控制台中没有错误。如果我将其注释掉并提交表单，它会使用 twitter 和 facebook 将社交添加到带有空字符串的 mongodb 中。

当表单提交时，它会添加名称和图像的值。

我的架构：

var McSchema = new Schema(
name: 
    type: String,
    default: '',
    required: 'A name is required',
    trim: true
,
image: 
    type: String,
    default: '',
    required: 'An image is required',
    trim: true
,
social: 
    twitter: 
        type: String,
        default: '',
        trim: true
    ,
    facebook: 
        type: String,
        default: '',
        trim: true
    
,
created: 
    type: Date,
    default: Date.now
,
user: 
    type: Schema.ObjectId,
    ref: 'User'

);

我的控制器：

angular.module('mcs').controller('McsController', ['$scope', '$stateParams', '$location', 'Authentication', 'Mcs',
function($scope, $stateParams, $location, Authentication, Mcs) 
    $scope.authentication = Authentication;

    // Create new MC
    $scope.create = function() 
        // Create new Mc object
        var mc = new Mcs (
            name: this.name,
            image: this.image,
            twitter: this.social.twitter
        );

        // Redirect after save
        mc.$save(function(response) 
            $location.path('mcs/' + response._id);

            // Clear form fields
            $scope.name = '';
            $scope.image = '';
            $scope.twitter = '';
        , function(errorResponse) 
            $scope.error = errorResponse.data.message;
        );
    ;

    ...

]);

我的表格：

<section data-ng-controller="McsController">
<div class="page-header">
    <h1>New Mc</h1>
</div>
<div class="col-md-12">
    <form class="form-horizontal" data-ng-submit="create()" novalidate>
        <fieldset>
            <div class="form-group">
                <label class="control-label" for="name">Name</label>
                <div class="controls">
                    <input type="text" data-ng-model="name" id="name" class="form-control" placeholder="Name" required>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label" for="image">Image</label>
                <div class="controls">
                    <input type="text" data-ng-model="image" id="image" class="form-control" placeholder="image" required>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label" for="social-twitter">Twitter</label>
                <div class="controls">
                    <input type="text" data-ng-model="mc.twitter" id="social-twitter" class="form-control" placeholder="@">
                </div>
            </div>
            <div class="form-group">
                <input type="submit" class="btn btn-default">
            </div>
            <div data-ng-show="error" class="text-danger">
                <strong data-ng-bind="error"></strong>
            </div>
        </fieldset>
    </form>
</div>

【问题讨论】：

新 Mcs 不应该通过对象而不是 Twitter 进行社交。类似social: twitter:this.social.twitter

【参考方案1】：

您在 html 中设置了 data-ng-model="mc.twitter"，但在 javascript 中您尝试访问 this.social.twitter。如果我没有错过任何东西，那就是你的问题。您应该更改其中任何一个以使它们相同，例如将您的 html 更改为：data-ng-model="social.twitter"。

【讨论】：

感谢 Materik，我还使用以下方法访问名称/图像：this.name 和 this.image，然后分别使用 mc.name 和 mc.image 从表单访问它们，这些都有效。当我介绍 this.social.twitter 时，问题就出现了。无论我尝试 mc.social.twitter、social.twitter 还是 mc.twitter，问题仍然存在。看来 mc.twitter 是对的，但是 this.social.twitter 是错的。

我不明白 mc 是从哪里来的。除了使用这个，你不能使用 $scope.mc.twitter 吗？那应该可以。

我无法让它工作。 mc 来自：var mc = new Mcs ( name: this.name, image: this.image, twitter: this.social.twitter );名称和图像都可以正常工作，只有 social.twitter 不能。唯一的区别是它是一个子文档。

您是否尝试过使用 @scope.social.twitter 而不是 this.social.twitter，因为它在您的 html 中显示 data-ng-model="social.twitter"。

html 使用的是：data-ng-model="mc.twitter"，而不是 data-ng-model="social.twitter"。我刚刚尝试@scope.social.twitter而不是this.social.twitter，仍然无法提交表单。