javascript - 无法使用 angularjs 和 Bootstrap 日期时间选择器提交表单

Question

我正在尝试发表一篇文章，并使用 Bootstrap 日期时间选择器非常简单地添加名称和日期时间。当我选择日期时间并点击“添加”时，什么也没有发生。但是，如果我在字段中输入并点击“添加”，它仍然会提交。我已经阅读了很多有关该项目的自定义指令等的内容，但是我似乎无法让它们中的任何一个工作，所以我想我只是分享我的代码。

索引.cshtml

    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-lg-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>Create Content Files</h5>
                    </div>
                    <!--Start Form -->
                    <div class="ibox-content">
                        <div class="form-horizontal" role="form" name="addcontentFileform">
                            <div class="form-group">
                                <label for="title" class="col-sm-2 control-label">File Name</label>
                                <div class="col-sm-10">
                                    <input type="text" data-ng-model="contentFile.FileName" class="form-control" id="title" placeholder="Your File Name" required title="Enter your File Name" />
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="title" class="col-sm-2 control-label">Publish Date</label>
                                <div class="col-sm-10">
                                    <div class="input-group date">
                                        <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
                                        <input type="text" class="form-control datetimepicker" id="datetimepicker" data-ng-model="contentFile.PublishDate" />
                                        <span class="glyphicon form-control-feedback"></span>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="col-sm-offset-2 col-sm-10">
                                    <span data-ng-hide="editMode">
                                        <input type="submit" value="Add" ng-disabled="addcontentFileform.$invalid" data-ng-click="add()" class="btn btn-primary" />
                                    </span>
                                    <span data-ng-show="editMode">
                                        <input type="submit" value="Update" ng-disabled="addcontentFileform.$invalid" data-ng-click="update()" class="btn btn-primary" />
                                    </span>
                                </div>
                            </div>
                            <!-- Start form Buttons -->
                            <div class="form-group">
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-ng-click="closeAddUpdate()">Cancel</button>
                                </div>
                            </div>
                            <!-- End form Buttons -->
                        </div>
                    </div>
                    <!--End Form -->
                </div>
            </div>
        </div>
    </div>

我正在按预期调用页面上的 Bootstrap 插件和 Controller 。

contentFile.controller.js

var app = angular.module('contentFileApp', []);
var baseAddress = 'http://localhost:63271/api/ApiContentFile/';
var url = "";

app.factory('contentFileFactory', function ($http) {
return {
    getContentFilesList: function () {
        url = baseAddress + "GetContentFilesList";
        return $http.get(url);
    },
    getContentFile: function (contentFile) {
        url = baseAddress + "GetContentFile/" + contentFile.Id;
        return $http.get(url);
    },
    addContentFile: function (contentFile) {
        url = baseAddress + "Post";
        return $http.post(url, contentFile);
    },
    updateContentFile: function (contentFile) {
        url = baseAddress + "Put/" + contentFile.Id;
        return $http.put(url, contentFile);
    },
    deleteContentFile: function (contentFile) {
        url = baseAddress + "DeleteContentFile/" + contentFile.Id;
        return $http.delete(url);
    }
};
});
app.controller('contentFileController', function PostController($scope, contentFileFactory) {
$scope.contentFiles = [];
$scope.contentFile = null;
$scope.editMode = false;

//get ContentFile
$scope.get = function () {
    $scope.contentFile = this.contentFile;
    $('#viewModal').toggle('show');
    $('#fullModal').toggle('hide');
};

//get all ContentFiles
$scope.getAll = function () {
    contentFileFactory.getContentFilesList().success(function (data) {
        $scope.contentFiles = data
        //$('#fullModal').toggle('show');
        $('#viewModal').toggle('hide');
        $('#contentFileModel').toggle('hide');
        $('#confirmModal').toggle('hide');
    }).error(function (data) {
        $scope.error = "An Error has occured while Loading contentFiles! " + data.ExceptionMessage;
    });
};

// add ContentFile
$scope.add = function () {
    var currentContentFile = this.contentFile;
    //if (currentContentFile != null && currentContentFile.FileName != null && currentContentFile.PublishDate && currentContentFile.PhotoURL && currentContentFile.IsOwned && currentContentFile.FileLink && currentContentFile.Description) 
    if (currentContentFile != null && currentContentFile.FileName != null && currentContentFile.PublishDate) {
        contentFileFactory.addContentFile(currentContentFile).success(function (data) {
            $scope.addMode = false;
            currentContentFile.Id = data;
            $scope.contentFiles.push(currentContentFile);

            //reset form
            $scope.contentFile = null;
            // $scope.addcontentFileform.$setPristine(); //for form reset

            $('#contentFileModel').modal('hide');
            $('#fullModal').toggle('show');
        }).error(function (data) {
            $scope.error = "An Error has occured while Adding contentFile! " + data.ExceptionMessage;
        });
    }
};

//edit contentFile
$scope.edit = function () {
    $scope.contentFile = this.contentFile;
    $scope.editMode = true;
    $('#contentFileModel').toggle('show');
    $('#fullModal').toggle('hide');
};

//update contentFile
$scope.update = function () {
    var currentContentFile = this.contentFile;
    contentFileFactory.updateContentFile(currentContentFile).success(function (data) {
        currentContentFile.editMode = false;

        $('#contentFileModel').toggle('hide');
        $('#fullModal').toggle('show');
    }).error(function (data) {
        $scope.error = "An Error has occured while Updating contentFile! " + data.ExceptionMessage;
    });
};

// delete ContentFile
$scope.delete = function () {
    currentContentFile = $scope.contentFile;
    contentFileFactory.deleteContentFile(currentContentFile).success(function (data) {
        $('#confirmModal').toggle('hide');
        $('#fullModal').toggle('show');
        //$('#fullModal').toggle('hide');
        $scope.contentFiles.pop(currentContentFile);

    }).error(function (data) {
        $scope.error = "An Error has occured while Deleting contentFile! " + data.ExceptionMessage;

        $('#confirmModal').toggle('hide');
    });
};

//Model popup events
$scope.showadd = function () {
    $scope.contentFile = null;
    $scope.editMode = false;
    $('#contentFileModel').toggle('show');
    $('#fullModal').toggle('hide');
};

$scope.showedit = function () {
    $('#contentFileModel').toggle('show');
    $('#fullModal').toggle('hide');
};

$scope.showconfirm = function (data) {
    $scope.contentFile = data;
    $('#confirmModal').toggle('show');
    $('#fullModal').toggle('hide');
};

$scope.cancel = function () {
    $scope.contentFile = null;
    $('#confirmModal').toggle('hide');
    $('#fullModal').toggle('show');
}

$scope.closeDetails = function () {
    $scope.contentFile = null;
    $('#viewModal').toggle('hide');
    $('#fullModal').toggle('show');
}
$scope.closeAddUpdate = function () {
    $scope.contentFile = null;
    $('#contentFileModel').toggle('hide');
    $('#fullModal').toggle('show');
}
$scope.closeDelete = function () {
    $scope.contentFile = null;
    $('#confirmModal').toggle('hide');
    $('#fullModal').toggle('show');
}

//initialize your contentFiles data
$scope.getAll();
});

很抱歉造成困惑，我只是很好奇如何处理这一切，以及我可能做错了什么

编辑:当我单击添加按钮时，contentFile.PublishDate 似乎没有绑定(bind)到模型

Answer 1

我找到了!在您的 add 方法中，您得到了这一行:

if (currentContentFile != null && 
    currentContentFile.FileName != null && 
    currentContentFile.PublishDate) 

问题:在填写日期字段之前，currentContentFile.PublishDate 将始终未定义，因此会一直阻止您第一次设置值...这也是您通过手动插入值来“修复”它的原因

简而言之 - 将上面的语句替换为:

if (currentContentFile != null && 
    currentContentFile.FileName != null)