【发布时间】：2020-09-08 08:12:42
【问题描述】：
我创建了这个表单来向服务器端提交一些信息。表单是 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;
}]);
})(); '''
【问题讨论】：
-
这是AddEditTenantSubmitForm 上不起作用的函数吗？
-
更像是没有被提交按钮调用。
-
你在使用 angularjs 对吗？为什么你这样命名方法？它应该是 $scope.onAddEditTenantSubmitForm = function(){} 或者如果你在顶部声明“var vm = this”那么 vm.onAddEditTenantSubmitForm = function(){}
标签： javascript html css angularjs web