Discovering a challenge with my current setup. I have implemented two separate controllers that handle adding 'country name' and 'price' to a list. Everything functions as expected when each button is clicked individually. However, when two buttons are randomly selected, the desired functionality is not achieved. I am utilizing a factory to create a custom service to address this issue. Below is a snippet of the code. Any insights on where I may have gone wrong or if something is overlooked would be greatly appreciated. Thank you.
(function() {
angular.module("customServiceApp", []).controller("westernCountriesController", westernCountriesControllerFunction).controller("asianCountriesController", asianCountriesControllerFunction).factory("serviceFactory", serviceFactoryController);
function serviceFactoryController() {
var serviceFactory = function(total) {
return new countriesService(total);
};
return serviceFactory;
}
function countriesService(total) {
service = this;
service.travelPackage = [];
service.addCountries = function(name, price) {
var countryTravelDetail = {
name: name,
price: price
}
if (service.travelPackage.length < total) {
service.travelPackage.push(countryTravelDetail);
} else {
throw Error("You cannot select more than " + total + " countries");
}
}
service.allTravelCountries = function() {
return service.travelPackage;
}
}
westernCountriesControllerFunction.$inject = ["serviceFactory"]
function westernCountriesControllerFunction(serviceFactory) {
var westTravel = this;
var service = serviceFactory(2);
westTravel.addCountry = function() {
try {
service.addCountries(westTravel.countryName, westTravel.countryPrice);
} catch (error) {
westTravel.errorMessage = error.message;
}
westTravel.showAllCountries = service.allTravelCountries();
}
}
asianCountriesControllerFunction.$inject = ["serviceFactory"];
function asianCountriesControllerFunction(serviceFactory) {
var asiaTravel = this;
var service = serviceFactory(3);
asiaTravel.addCountry = function() {
try {
service.addCountries(asiaTravel.countryName, asiaTravel.countryPrice);
} catch (error) {
asiaTravel.errorMessage = error.message;
}
asiaTravel.displayCountries = service.allTravelCountries();
}
}
})();<!DOCTYPE html>
<html ng-app="customServiceApp">
<head>
<meta charset="utf-8">
<meta name="description" content="First Angular App">
<meta name="keywords" content="HTML, Javascript, AngularJs">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.angularjs.org/1.6.1/angular.min.js"></script>
<script src="app.js"></script>
<title>Custom Angular Service</title>
</head>
<body>
<div ng-controller="asianCountriesController as asiaTravel">
<input type="text" placeholder="Country Name" ng-model="asiaTravel.countryName">
<input type="text" placeholder="Country Price" ng-model="asiaTravel.countryPrice">
<input type="button" value="Add Asian Countries" ng-click="asiaTravel.addCountry();">
<ul>
<li ng-repeat="asianCountry in asiaTravel.displayCountries">Country Name : {{asianCountry.name}} and Price is : {{asianCountry.price}}</li>
</ul>
<div ng-if({{asiaTravel.errorMessage !=null}})>{{asiaTravel.errorMessage}}</div>
</div>
<div ng-controller="westernCountriesController as westTravel">
<input type="text" placeholder="Country Name" ng-model="westTravel.countryName">
<input type="text" placeholder="Country Price" ng-model="westTravel.countryPrice">
<input type="button" value="Add Western Countries" ng-click="westTravel.addCountry();">
<div ng-repeat="westernCountry in westTravel.showAllCountries">Western country selected is: {{westernCountry.name}} and the price is : {{westernCountry.price}}</div>
<div ng-if({{westTravel.errorMessage !=null}})>{{westTravel.errorMessage}}</div>
</div>
</body>
</html>