我正在将我现有的项目转换为angularJs，并且有一个JS对象我可以在表单提交上保持更新。
autoquoteDTO.js：
$.getAutoQuoteObject = function() {
var autoQuoteObject = new autoQuote();
autoQuoteObject.DriverVehicleInfo = new DriverVehicleInfo();
autoQuoteObject.DriverVehicleInfo.Vehicles = [];
autoQuoteObject.DriverVehicleInfo.Drivers = [];
autoQuoteObject.ApplicationInfo = new ApplicationInfo();
autoQuoteObject.ApplicationInfo.Discount = new Discount();
autoQuoteObject.ApplicationInfo.GeneralPartyInfo = new GeneralPartyInfo();
autoQuoteObject.ApplicationInfo.GeneralPartyInfo.ContactInfo = new Contact();
autoQuoteObject.ApplicationInfo.MostRecentInsurance = new MostRecentInsurance();
autoQuoteObject.RequestedCoverage = new RequestedCoverage();
autoQuoteObject.RequestedCoverage.PolicyCoverage = new PolicyCoverage();
autoQuoteObject.RequestedCoverage.PolicyCoverage.Coverages = [];
autoQuoteObject.RequestedCoverage.VehicleCoverage = [];
autoQuoteObject.SessionInfo = new SessionInfo();
return autoQuoteObject;
}
function autoQuote() {
this.DriverVehicleInfo = null;
this.ApplicationInfo = null;
this.RequestedCoverage = null;
this.SessionInfo = null;
}
var DriverVehicleInfo = function() {
this.Drivers = [];
this.Vehicles = [];
this.DriverVehicleUsages = [];
};
var Driver = function() {
this.ID = null, this.PersonInfo = null, this.DriverRelationshipToApplicant = null, this.DriverRelationshipToApplicantCd = null, this.DriverLicense = null, this.DriverDetails = [], this.Incident = null, this.IsValid = false
};
var PersonInfo = function() {
this.FirstName = null, this.Initial = null, this.LastName = null, this.Suffix = null, this.SSN = null, this.GenderCd = null, this.BirthDate = null, this.MaritalStatusCd = null, this.OccupationClassCd = null, this.YearsOccupation = null, this.HighestEducation = null, this.AgeInYears = 0, this.SpouseLicenseStatus = null
};
var DriverLicense = function() {
this.AgeLicense = null, this.USLicenseStatus = null, this.DriverLicenseNumber = null, this.StateProvCd = null
};
var DriverDetail = function() {
this.DriverDetailCd = null, this.DriverDetailValue = null, this.DriverDetailDate = null
};
var Incident = function() {
this.ClaimAccidentsCount = null, this.ViolationsCount = null, this.HasLicenseBeenRevoked = null, this.LicenseSuspensionRevokedDate = null, this.HasRequiredCourtOrderedFinancial = null, this.ClaimAccidents = [], this.Violations = [], this.DUIs = []
};
var DUI = function() {
this.DateOfDUI = null, this.OtherValues = []
};
var ClaimAccident = function() {
this.Id = null, this.ClaimAccidentCd = null, this.displayText = null, this.ClaimAccidentDate = null, this.DateDisplayText = null, this.Comprehensive = null, this.Collision = null, this.RentalReimbursement = null, this.MedicalPayment = null, this.PayToOtherParty = null, this.IsInjury = null, this.IsPropertyDamage = null
};
var Violation = function() {
this.Id = null, this.ViolationCd = null, this.ViolationDate = null, this.displayText = null
};
var Vehicle = function() {
this.ID = null, this.VehicleHaveVin = false, this.VehicleIdentificationNumber = null, this.VehicleYear = null, this.VehicleMake = null, this.VehicleModel = null, this.VehicleSubModel = null, this.AntiLockBrakeCd = null, this.AntiTheftDeviceCd = null, this.VehicleUseCd = null, this.NumDaysDrivenPerWeek = null, this.DistanceOneWay = null, this.EstimatedAnnualDistance = null, this.OwnershipCd = null, this.RegistrationStateProvCd = null, this.VehIdentificationNumber = null, this.IsCustomizedOrAltered = null, this.OriginalVehicleCost = null, this.IsValid = false, this.VehicleType = null, this.VehicleVinStub = null, this.ShowVehicleAntiLockBrakeInfo = false, this.VehicleCost = null, this.ShowVehicleCost = false, this.DaytimeLights = null
};
var DriverVehicleUsage = function() {
this.DriverIDRef = null, this.VehicleIDRef = null, this.Usage = null
};
var ApplicationInfo = function() {
this.GeneralPartyInfo = null, this.Discount = null, this.MostRecentInsurance = null, this.ConsumerContactAuth = null, this.ConsumerInfoAuthorization = null, this.ConsumerContactMobileAuth = null
};
var GeneralPartyInfo = function() {
this.MainApplicantDriverIDRef = null, this.Address = null, this.PreviousAddress = null, this.ContactInfo = null, this.ResidenceInfo = null, this.ListedVehiclesRegisteredTo = null, this.CreditScore = 0
};
var AddressInfo = function() {
this.Address = null, this.City = null, this.State = null, this.PostalCode = null, this.County = null
};
var PreviousAddress = function() {
this.Address = null, this.City = null, this.State = null, this.PostalCode = null, this.County = null
};
var Contact = function() {
this.Phones = [], this.Emails = []
};
var Email = function() {
this.EmailTypeCd = null, this.EmailAddress = null
};
var Phone = function() {
this.PhoneTypeCd = null, this.PhoneNumber = null
};
var Residence = function() {
this.LengthAtCurrentAddressCd = null, this.ResidenceTypeCd = null, this.NumberDriversInHouseHold = null, this.VehiclesRegistedToInsured = null, this.DriverResidentsFromFL = null, this.CityLimits = null
};
var Discount = function() {
this.ResidentialInsurancePolicy = null, this.OwnBoat = null, this.OwnMotorCycle = null, this.IsAAAMember = null
};
var MostRecentInsurance = function() {
this.HasAutoInsurance = null, this.InsuranceCompanyName = null, this.CurrentInsurancePaying = null, this.LengthWithCurrentInsuranceCd = null, this.BodilyInjuryLiabilityLimit = null, this.LengthContinuouslyInsuredCd = null, this.ExpirationDate = null, this.InsuranceCanceledForNonPay = null, this.ClaimDeniedDueToFraud = null
};
var RequestedCoverage = function() {
this.EffectiveDate = null, this.StateCd = null, this.PolicyCoverage = null, this.VehiclesCoverage = []
};
var PolicyCoverage = function() {
this.Coverages = []
};
var Coverage = function() {
this.CoverageCd = null, this.CoverageValue = null
};
var VehicleCoverage = function() {
this.IsValid = false, this.VehicleIDRef = null, this.Coverages = []
};
var SessionInfo = function() {
this.SessionId = '', this.SecurityToken = '', this.Zip = '', this.StateCode = '', this.PageName = '', this.PageTheme = '', this.CarrierId = -1, this.ReturnedCarrierTypes = null, this.CoveragePackage = '', this.UseExistingSession = false, this.QuoteStatus = '', this.SID = -1, this.SRC = null, this.SRC_QCP = null, this.Referral = null, this.ClientIP = null, this.BrowserType = null, this.CLK = 0, this.QTR = '', this.CCID = '', this.AFF = '', this.PreviousSessionId = '', this.IgnoreErrors = false, this.RetrieveSource = '', this.PreviousPageName = ''
}
Praparjsnjes：
var prepareAutoQuoteDTO = {
postAutoQuoteObj: $.getAutoQuoteObject(),
initializeDriverObj: function()
{
var driverLocObj = new Driver();
driverLocObj.PersonInfo = new PersonInfo();
driverLocObj.DriverLicense = new DriverLicense();
driverLocObj.Incident = new Incident();
return driverLocObj;
},
initializeAppInfo: function()
{
var appInfoLocObj = new ApplicationInfo();
appInfoLocObj.Discount = new Discount();
return appInfoLocObj;
},
/*
* Initialize Vehicle object for autoQuoteDTO.js
*/
initializeVehicleObj: function()
{
var vehicleLocObj = new Vehicle();
return vehicleLocObj;
},
rc1Step1DTO: function()
{
/*
* store session info
*/
var emailId = $('#save_quote_email').val();
if (typeof emailId !== "undefined" && emailId && emailId != '' && emailId != 'Email Address')
{
var email = new Email();
email.EmailTypeCd = 'PRIMARY';
email.EmailAddress = emailId;
this.postAutoQuoteObj.ApplicationInfo.GeneralPartyInfo.ContactInfo = this.postAutoQuoteObj.ApplicationInfo.GeneralPartyInfo.ContactInfo || new Contact();
this.postAutoQuoteObj.ApplicationInfo.GeneralPartyInfo.ContactInfo.Emails = [];
this.postAutoQuoteObj.ApplicationInfo.GeneralPartyInfo.ContactInfo.Emails.push(email);
}
};
在用户事件代码上更新json：
prepareAutoQuoteDTO.rc1Step1DTO();
应该更新JS对象的新Angular JS代码：
(function(){
"use strict";
angular
.model("autoQuote")
.controller("prepareDTO","prepareDTO")
.controller("postDTO","postDTO");
/*
* Call actions on page load
*/
var init = function () {
prepareDTO();
}
init();
/*
* prepare DTO with form elements.
*/
function prepareDTO()
{
var vm = this;
vm.postAutoQuoteObj = [];
}
/*
* post DTO on form submit and page onload.
*/
function postDTO()
{
}
});
表单逻辑应包含在prepareDTO函数中。
预期的行为是，如果提交了step1表单，则应调用rc1Step1DTO并保存JS数据。
寻找实现这一目标和最佳实践的建议。
我的完整代码的plunker是http://plnkr.co/edit/VJKrDRMJY3Q73bsCgVwX?p=preview。
我可以删除/编辑这个文件和Angular JS中的所有内容但是在AngularJS中如何做到这一点。
您可以将所有代码移动到工厂中，然后将其注入控制器。在执行之前必须包含所有其他依赖项（如Driver），甚至可以在prepareDtoFactory函数中声明。
angular
.model("autoQuote")
.controller(dtoController)
.factory(prepareDtoFactory);
function dtoController(prepareDtoFactory){
prepareDtoFactory.rc1Step1DTO(); //call function from your service, and do something with it
}
dtoController.$inject = ['prepareDtoFactory'];
function prepareDtoFactory(){
var prepareAutoQuoteDTO = {
postAutoQuoteObj : $.getAutoQuoteObject(),
initializeDriverObj: function(){
var driverLocObj = new Driver();
driverLocObj.PersonInfo = new PersonInfo();
driverLocObj.DriverLicense = new DriverLicense();
driverLocObj.Incident = new Incident();
return driverLocObj;
},
initializeAppInfo: function(){
var appInfoLocObj = new ApplicationInfo();
appInfoLocObj.Discount = new Discount();
return appInfoLocObj;
},
/*
* Initialize Vehicle object for autoQuoteDTO.js
*/
initializeVehicleObj: function(){
var vehicleLocObj = new Vehicle();
return vehicleLocObj;
},
/*
* store session info
*/
rc1Step1DTO: function(){
var emailId = $('#save_quote_email').val();
if (typeof emailId !== "undefined" && emailId && emailId != '' && emailId != 'Email Address'){
var email = new Email();
email.EmailTypeCd = 'PRIMARY';
email.EmailAddress = emailId;
this.postAutoQuoteObj.ApplicationInfo.GeneralPartyInfo.ContactInfo = this.postAutoQuoteObj.ApplicationInfo.GeneralPartyInfo.ContactInfo || new Contact();
this.postAutoQuoteObj.ApplicationInfo.GeneralPartyInfo.ContactInfo.Emails = [];
this.postAutoQuoteObj.ApplicationInfo.GeneralPartyInfo.ContactInfo.Emails.push(email);
}
}
};
return prepareAutoQuoteDTO;
}
关注AJS guide：
HTML
<div ng-controller="prepareDTO as pdt">
<form novalidate class="simple-form">
E-mail: <input type="email" ng-model="pdt.user.email" /><br />
<input type="button" ng-click="pdt.reset()" value="Reset" />
<input type="submit" ng-click="pdt.update(user)" value="Save" />
</form>
<pre>user = {{user | json}}</pre>
</div>
app.js
function prepareDTO()
{
var vm = this;
vm.user = {
email: ''
};
vm.update = function(user){
prepareAutoQuoteDTO.rc1Step1DTO(user.email);
}
}
请注意，为避免错误，prepareAutoQuoteDTO.rc1Step1DTO应修改为：
rc1Step1DTO: function(email)
{
/*
* store session info
*/
var emailId = email;
if (typeof emailId !== "undefined" && emailId && emailId != '' && emailId != 'Email Address')
{
var email = new Email();
email.EmailTypeCd = 'PRIMARY';
email.EmailAddress = emailId;
this.postAutoQuoteObj.ApplicationInfo.GeneralPartyInfo.ContactInfo = this.postAutoQuoteObj.ApplicationInfo.GeneralPartyInfo.ContactInfo || new Contact();
this.postAutoQuoteObj.ApplicationInfo.GeneralPartyInfo.ContactInfo.Emails = [];
this.postAutoQuoteObj.ApplicationInfo.GeneralPartyInfo.ContactInfo.Emails.push(email);
}
}