Question

我有一个简单的用户界面，用户可以使用输入字段输入多个值。这些值使用ng-model和ng-repeat显示在列表中。我现在的控制器看起来像这样：

angular.module('app', [])
.controller('mainController', function($scope){
   "use strict";
   $scope.items = [];
   $scope.recordTemperature = function(){
     $scope.items.push({
       temperature: $scope.newTemperature
     });
     // Clear input fields after push
     $scope.newTemperature = '';
   };    
});

此控制器目前正常工作，我想开始创建更多方法但是我想将recordTemperature移到工厂，因为我将添加更多方法并希望保持控制器清洁。所以我想我可以改变我的控制器：

.controller('mainController','TemperatureMonitor', function($scope, TemperatureMonitor){
  "use strict";
  $scope.addTemperature = function(){
    if($scope.myForm.$valid){
      TemperatureMonitor.recordTemperature();
    }else{
      alert('invalid form');
    }
  };
});

我的工厂是这样的：

.factory('TemperatureMonitor', function(){
  $scope.items = [];
  return{
    recordTemperature: function(){
      $scope.items.push({
        temperature: $scope.newTemperature
      });
    }
  };
})

不幸的是它不起作用。我很难看到答案，我已经尝试了几件事，太多无法列出;）没有成功:( 谢谢你的帮助。这是HTML的供参考：

<div class="container" ng-controller="mainController">
    <h1>Temperature Monitor</h1>
    <form ng-submit='submitted=true; recordTemperature();' name="myForm">
      <label for="temperature">Add Temperture:</label>
      <input name="temperature" id="temperature" ng-model="newTemperature">
      <button class="btn btn-success" type="submit">Add</button>
      <button class="btn btn-primary" ng-click="startOver">Start over</button>
    </form>
    <ul>
      <li ng-repeat="item in items">{{item.temperature}}</li>
    </ul>
 </div>

Answer 1

$scope是一个仅适用于控制器的本地注入，并且通常（但并非总是）对于控制器的每个实例都不同。

要使函数有效，您需要将$ scope对象作为该函数的参数传递给工厂服务函数。

您的工厂：

.factory('TemperatureMonitor', function(){
  return{
    recordTemperature: function(items,newTemperature){
      items.push({
        temperature: newTemperature
      });
    }
  };
})

您的控制器：

.controller('mainController','TemperatureMonitor', function($scope, TemperatureMonitor){
  "use strict";
  $scope.items = [];
  $scope.addTemperature = function($scope.items, $scope.newTemperature){
    if($scope.myForm.$valid){
      TemperatureMonitor.recordTemperature();
    }else{
      alert('invalid form');
    }
  };
});

正如JB Nizet的评论所述，工厂服务是单身人士。其中的任何数据都在控制器的实例化之间共享，并在应用程序的整个生命周期中持续存在。

如何将此逻辑从控制器移动到工厂

1 个答案: