Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/angularjs/23.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 在Angular.js中使用工厂和控制器之间的逻辑_Javascript_Angularjs_Angularjs Directive_Angular Factory - Fatal编程技术网

Javascript 在Angular.js中使用工厂和控制器之间的逻辑

Javascript 在Angular.js中使用工厂和控制器之间的逻辑,javascript,angularjs,angularjs-directive,angular-factory,Javascript,Angularjs,Angularjs Directive,Angular Factory,以下是我正在尝试做的事情的描述: 目前,我正在构建的web应用程序上有一个angular.module,这是一个价格计算器,用户可以在其中输入他们希望在酒店住宿的天数/周,并让该模块计算他们的估计价格,其中包括他们希望入住的日期的费用/天/周 目前,我通过控制器从我的angular.factory中选择四季菜单(见下文)。用户可以从我存储在工厂中的不同选项中选择对象文字,根据他们在菜单中选择的“标签”,它将根据在该酒店的1周住宿计算价格。太好了 现在,我想为我的步进器添加一些功能,这些功能是我通

以下是我正在尝试做的事情的描述:

目前,我正在构建的web应用程序上有一个
angular.module
,这是一个价格计算器,用户可以在其中输入他们希望在酒店住宿的天数/周,并让该模块计算他们的估计价格,其中包括他们希望入住的日期的费用/天/周

目前,我通过
控制器从我的
angular.factory
中选择四季菜单(见下文)。用户可以从我存储在工厂中的不同选项中选择对象文字,根据他们在菜单中选择的“标签”,它将根据在该酒店的1周住宿计算价格。太好了

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

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

我知道我不能让控制器彼此对话,也不能让
$scope
查找除我设置的
app.factory
之外的任何全局变量?我能把所有的
角度步进机
存储在工厂里,让我的
应用程序控制器继承它吗

因此,总而言之,当用户使用我提供的步进器向他们的请求添加天数和周数时,我想动态地更改价格估计器的美元金额,我被困在哪里放置我的逻辑。我希望这是有意义的

这是我的密码:

HTML:


您肯定可以让您的控制器彼此对话,并且在weekStepper和dayStepper之间已经有了父子关系,因为day在html中嵌套在week中

您可以使用天内步进器中的$parent与weekStepper控制器对话,或者由于它们是嵌套的,子控制器将自动继承父控制器的属性

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

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

这里有很多关于父控制器和子控制器的问题和答案。这是比较流行的一种:


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

谢谢你的回复。很高兴知道!我不熟悉
$parent
,我将对此进行调查。即使我可以访问工厂中每个控制器中的所有对象文本,我仍然认为我遇到的问题是,我仍然需要访问另一个控制器中weekStepper控制器上的
$scope
上定义的属性之一。也许我认为这是错误的,但我想为每当用户增加weekStepper时,它都会向
{{seasslist.value}}
添加更多的逻辑,这意味着我需要访问
$scope.minRating
,是吗?我不知道在哪里写逻辑来实现这一点…我想我可能需要修改由制定指令的人提供的angular-stepper.js文件。。。
<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>
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];
});