Question

我有两个controllers，每个人都有一个按钮，可以在列表中添加“国家/地区名称”和“价格”。当我单独单击该按钮时，该功能可以按预期工作，即在列表中添加适当数量的数据并在数量超过时显示错误消息。但是，如果我随机选择两个按钮，它将无法正常工作。我正在使用工厂来创建自定义服务以实现目标。以下是代码段。如果有人能指出我在哪里犯错或者我错过了什么，我将不胜感激。非常感谢你。

(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>

Answer 1

service = this; - 将其存储在全局变量中。这意味着第二次调用该服务时，旧值会被覆盖。

你应该这样做（在countriesService中）：

var service = this; 

.... // here is the logic.

return service;

AngularJs使用工厂无法正常工作的自定义服务

1 个答案: