Question

我创建了此表单，以向服务器端提交一些信息。表单使用HTML / CSS，并且我使用的是AngularJS最新版本。我还确保该按钮位于表单内。我知道它最常见的错误。但是仍然无法正常工作。我要调用的函数是“ onAddEditTenantSubmitForm”，该函数也已分配给状态。我已经使用Chrome浏览器对其进行了检查，并将其标记为第87行。控制台中也没有错误。

下面是指向JSFiddle的链接 https://jsfiddle.net/jLtsuonx/

''' （函数（）{ var app = angular.module（'app'）; app.controller（'MultiTenantController'，['$ scope'，'$ filter'，'TenantServices'，function（$ scope，$ filter，TenantServices）{

    var uibModal = null;

    var test = "Multi Tenat Controller";

    var state = {
        tenantModel: {
            addedOn: '',
            connectionString: '',
            createdBy: '',
            endOn: '',
            id: '',
            identifier: '',
            isDisabled: '',
            items: [{
                isDisabled: '',
                tenantType: '',
            }],
            name: '',
            startFrom: '',
            tenantType: '',
            userId: '',
        },
    };
    var init = function () {

        $(document).ready(function () {
            tenantTable = $('#table_Tenants').DataTable({
                ajax: {
                    url: 'API/MultiTenant/Pagged',
                    method: 'POST'
                },
                columns: [
                    { data: 'name' },
                    { data: 'identifier' },
                    { data: 'connectionString' },
                    {
                        data: 'startFrom',
                        render: function (startFrom) {
                            return $filter('date')(startFrom, 'medium');
                        }
                    },
                    {
                        data: 'addedOn',
                        render: function (addedOn) {
                            return $filter('date')(addedOn, 'medium');
                        }
                    },
                    {
                        data: 'endOn',
                        render: function (endOn) {
                            return $filter('date')(endOn, 'medium');
                        }
                    },
                    {
                        data: 'actions',
                        orderable: false,
                        render: function () {
                            return `<div class="list-icons">
                                <div class="dropdown">
                                    <a href="#" class="list-icons-item" data-toggle="dropdown">
                                        <i class="icon-menu9"></i>
                                    </a>
                                    <div class="dropdown-menu dropdown-menu-right">
                                        <a href="javascript:void(0)" class="dropdown-item editTenant"><i class="icon-database-edit2"></i>Edit</a>
                                        <a href="javascript:void(0)" class="dropdown-item deleteTenant"><i class="icon-database-remove"></i>Delete</a>                                                                                                                                                                                                                                                                                                                   
                                    </div>
                                </div>
                            </div>`;
                        }
                    }
                ]
            });

            tenantTable.on('click', '.deleteTenant', function () {
                const $row = $(this).closest('tr');
                const rowData = tenantTable.row($row).data();
                deleteTenant(rowData);
            });
        })
    };

    const onAddEditTenantSubmitForm = function (newTenatForm) {
        if (!state.tenantModel.userId) {
            addTenant(newTenatForm);
        }
        else {
            //updateUser(newUserForm);
        }
    };

    var addTenant = function (newTenatForm) {
        state.isLoading = true;
        TenantServices.addTenant(state.tenantModel).then(
            function () {
                swalInit.fire({
                    title: 'Success',
                    text: 'Tenant has been created',
                    type: 'success'
                });
                userTable.ajax.reload();
                closeModal();
            },
            function (errorResponse) {
                if (errorResponse.status === 400 && errorResponse.data.duplicateRecord) {

                }
                else if (errorResponse.status === 500) {
                    swalInit.fire({
                        title: 'Server Error',
                        text: 'An server error occurred while adding tenant.',
                        type: 'error'
                    });
                }
            }
        )
            .finally(() => state.isLoading = false);
    };  

    var deleteTenant = function (rowObj) {
        state.isLoading = true;
        TenantServices.deleteTenant(rowObj.id).then(
            function () {
                swalInit.fire({
                    title: 'Success',
                    text: 'Tenant Deleted!',
                    type: 'success'
                });
                tenantTable.ajax.reload();
                closeModal();
            },
            function (errorResponse) {
                if (errorResponse.status === 500) {
                    swalInit.fire({
                        title: 'Server Error',
                        text: 'An server error occurred while Deleting Tenant.',
                        type: 'error'
                    });
                }
                else if (errorResponse.status === 404) {
                    swalInit.fire({
                        title: 'Server Error',
                        text: 'Tenant not found on Server.',
                        type: 'error'
                    });
                }
            }
        )
            .finally(() => state.isLoading = false);
    };

    var closeModal = function () {
        if (uibModal) {
            uibModal.close();
        }
    };

    state.onAddEditTenantSubmitForm = onAddEditTenantSubmitForm;
    state.test = test;

    $scope.state = state;
    $scope.init = init;

}]);

}）（）; '''

Answer 1

您需要通过ng-submit在模板上调用的函数位于您的范围内，然后更改模板以正确调用它。

在控制器上，从const更新函数并将其绑定到作用域

$scope.onAddEditTenantSubmitForm = function (newTenatForm) {

在模板上添加“ $ ctrl”。作为功能的前缀

 ng-submit="$ctrl.onAddEditTenantSubmitForm(newTenatForm)"

提交时未调用函数

1 个答案: