在Angular.js中的工廠和控制器之間使用邏輯

Question

這是我要做什么的描述：

目前，我正在構建的Web應用程序上有一個angular.module ，它是一個價格計算器，用戶可以在其中輸入他們希望留在酒店的天數/周數，並讓該模塊使用希望入住的日期包括費用/天/周。

目前，我angular.factory通過controller從我的angular.factory季節選擇菜單（請參見下文）。 用戶可以從我作為對象文字存儲在工廠中的不同選項中進行選擇，並根據他們在菜單中選擇的“標簽”，它將基於在這家酒店住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];
});

Answer 1

您絕對可以讓您的控制器互相交談，並且在stepStepper和dayStepper之間已經具有父子關系，因為day嵌套在html中的week內。

您可以在一日步進器中使用$ parent與weekStepper控制器進行對話，或者由於它們是嵌套的，因此子控制器將自動繼承父級的屬性。

但是，由於已經設置了工廠，因此只需將工廠注入每個控制器並從那里訪問屬性。 工廠是單例，因此，即使將其注入到每個控制器中，所有這些引用都將指向同一實例並具有相同的數據。

根據我在上面所說的內容，因為如果您將seasonFactory並注入weekStepper並將其存儲到屬性中（例如Season factory），則控制器將如何嵌套在html中，則$ scope.seasonFactory將在所有控制器中可用。 您可以在檢索到數據后將其存儲在工廠中，或者將存儲工廠方法結果的代碼移動到最外部的控制器，並以這種方式在任何地方使用。

關於父母和孩子的控制器，這里有很多很棒的問題和答案。 這是最受歡迎的一種： AngularJS從子控制器訪問父作用域

另外，如果您使用的是Angle 1.5或更高版本，這將是開始使用組件的絕佳機會。