-1
我有兩個controllers，每個人都有一個按鈕在列表中添加'國家名'和'價格'。當我單獨點擊按鈕時，功能按需要工作，即在列表中添加適當數量的數據，並在數字超過時顯示錯誤消息。但是，如果我隨機選擇兩個按鈕，它不會按要求工作。我正在使用工廠創建自定義服務來實現目標。以下是代碼片段。如果有人能指出我犯了什麼錯誤或者我錯過了什麼，我將不勝感激。非常感謝你。AngularJs使用工廠不正常工作的定製服務
(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>
您使用ngIf錯誤。正確的用法是'ng-if =「{{expr}}」'。你爲什麼用ngIf代替ngShow？ – cst1992
那麼ng-if的正確用法是'ng-if =「expr」'。 –