0

这是我正在尝试做的事情的描述：

我目前angular.module在我正在构建的网络应用程序上有一个价格计算器，用户可以在其中输入他们希望在酒店停留的天数/周数，并让模块计算他们的估计价格和费用/天数/weeks 包括他们想留下的日期。

angular.factory我目前通过 a controller（见下文）从我的精选季节菜单中提取。用户可以从我作为对象文字存储在工厂中的不同选项中进行选择，并且根据他们在菜单中选择的“标签”，它将根据在这家酒店停留 1 周来计算他们的价格。伟大的。

现在，我想为我的步进器添加一些功能，这些功能是通过我选择每天和每周用作步进器的 [Revolunet/angular-stepper][1] 指令设置的。

我遇到的问题是我不确定在哪里进行计算逻辑。我希望用户能够在选择菜单中选择一个季节，然后使用步进器使用步进器添加任何额外的天数/周数，并根据用户选择的天数/周数动态调整估计的总数.

我知道我不能让控制器相互交谈，除了我设置$scope的变量之外，我不能寻找任何全局变量？app.factory我可以把所有的angular-stepper东西都存放在工厂里并让我app.controller继承吗？

因此，总而言之，当用户使用我提供的步进器将几天和几周添加到他们的请求中时，我想动态地更改我的价格估算器的美元金额，并且我不知道将我的逻辑放在哪里。我希望这是有道理的！

这是我的代码：

HTML：

<div id= "estimator-wrapper" ng-app="priceEstimator">
    <h3> Price Estimator</h3>
    <h4> (with fees):</h4>
    <div ng-controller="weekStepper">
      <div  ng-controller="seasonSelector">
        <h2>{{ seasonsList.value }}</h2>
        <p> Select a season:</p>
        <select ng-model="seasonsList" ng-options="season as season.label for season in seasons"></select>
      </div>
      <label>Number of weeks:</label>
        <div min="minRating" max="maxRating" ng-model="rating" rn-stepper></div>
    <div ng-controller="dayStepper">
      <label>Number of days:</label>
        <div min="minRating" max="maxRating" ng-model="rating" rn-stepper></div>
      </div>
  </div>

这是我的 Angular.js 模块：

const app = angular.module('priceEstimator', ['revolunet.stepper']);

app.factory('seasonFactory', () => {
  let factory = {};
  let seasons = [
    { label:'-', value: '$' + 0},
    { label:'Fall/Winter', value: '$' + Math.floor((2100 + 245) * 1.115) },
    { label: 'Spring', value: '$' + Math.floor((2900 + 245) * 1.115) },
    { label: 'Summer', value: '$' + Math.floor((3995 + 245) * 1.115) }
  ];
  factory.getSeasons = () => {
    return seasons;
  };
  return factory;
});

app.controller("weekStepper",($scope) => {
  $scope.rating = 0;
  $scope.minRating = 0;
  $scope.maxRating = 8;
});

app.controller("dayStepper",($scope) => {
  $scope.rating = 0;
  $scope.minRating = 0;
  $scope.maxRating = 6;
});

app.controller("seasonSelector",($scope, seasonFactory) => {
  $scope.Math = Math;
  $scope.seasons = seasonFactory.getSeasons();
  $scope.seasonsList = $scope.seasons[0];
});
4

1 回答 1

1

您绝对可以让您的控制器相互交谈，并且已经在 weekStepper 和 dayStepper 之间建立了父子关系，因为 day 在您的 html 中嵌套在一周内。

您可以在 day stepper 中使用 $parent 与 weekStepper 控制器对话，或者由于它们是嵌套的，子控制器将自动继承父控制器的属性。

但是，由于您已经设置了工厂，只需将工厂注入每个控制器并从那里访问属性。工厂是单例的，所以即使你将它注入到每个控制器中，所有这些引用都将指向同一个实例并具有相同的数据。

根据我上面所说的，由于如果您将 seasonFactory 和 weekStepper 注入并将其存储到属性（例如季节工厂）中，您的控制器是如何嵌套在您的 html 中的，那么 $scope.seasonFactory 将在所有控制器中可用。一旦检索到数据，您就可以将数据存储在工厂中，或者将存储工厂方法结果的代码移动到最外层的控制器，并以这种方式使其在任何地方都可用。

这里有很多关于父子控制器的很好的问题和答案。这是比较流行的一种：AngularJS access parent scope from child controller

此外，如果您使用 angular 1.5 或更高版本，这将是开始使用组件的绝佳机会。

于 2018-01-04T21:08:19.320 回答