Question

我试图将功能与控制器分开并将其投入使用，以便我可以在多个控制器中使用它，而无需在不同的控制器上添加相同的功能。

我的原始控制器，在我尝试使用服务进行配置之前，工作正常，看起来像下面这个（colorController.js）：

colorController.js

(function() {

  angular
    .module('evolution')
    .controller('ColorController', ColorController);

  ColorController.$inject = ['$scope', '$http'];

  function ColorController($scope, $http){
    $scope.range = function(max, min, step){
      step = step || 1;
      var input = [];
      for (var i = max; i >= min; i -= step) input.push(i);
      return input;
    };

  };


})();

以下是我尝试将其与服务和新控制器分开的代码

rangeService.service.js

(function() {

  angular
    .module('evolution')
    .service('RangeService', RangeService);


  function RangeService(){

    this.range = function(max, min, step){
      step = step || 1;
      var input = [];
      for (var i = max; i >= min; i -= step) input.push(i);
      return input;
    };

  };


})();

rangeController.js

(function() {

  angular
    .module('evolution')
    .controller('RangeController', RangeController);

  RangeController.$inject = ['$scope', '$http', '$log', 'RangeService'];

  function RangeController($scope, $http, $log, RangeService){

    $scope.range = function() {
      $scope.result = RangeService.range();
      return $scope.result;
    }

    console.log($scope.range());   
  };


})();

输出上面的console.log（$ scope.range）;是空数组[]

如果我将一些参数传递给RangeService，就像这样：

$scope.result = RangeService.range(100,96);

然后我可以在浏览器中看到正确的输出。

现在我只需要在colors.html中执行这些参数，如下面的代码所示：

<div class="color_column_row" ng-repeat="n in range(100,50, 5)">

以下是html代码。

我在这里改变的是来自ng-controller =＆＃34; ColorController＆＃34;到ng-controller =＆＃34; RangeController＆＃34;

colors.html

<div class="col-xs-12 col-sm-3" id="color_column_white_container" ng-app='evolution' ng-controller="RangeController">

  <h1 class="evo-header-5 reverse">Light Translucent Colors</h1>

  <div class="color_column_row" ng-repeat="n in range(100,50, 5)">
    <div class="color_swatch_bar evo-light-{{ n }}-bg">
      <span class="tag">evo-light-{{ n }}</span>
      <span class="tag">{{ n }}%</span>
    </div>
  </div>

</div>

Answer 1

问题出在rangeController.js文件中。您没有将函数参数传递给RangeService.range。 RangeController中的函数应为

$scope.range = function(max, min, step) {
  $scope.result = RangeService.range(max, min, step);
  return $scope.result;
}

Answer 2

您没有将参数传递给RangeService.range()函数，因此函数认为max和min未定义。

您可以使用.apply()来解决此问题，以便传递$scope.range()的参数：

(function() {

  angular
    .module('evolution')
    .controller('RangeController', RangeController);

  RangeController.$inject = ['$scope', '$http', '$log', 'RangeService'];

  function RangeController($scope, $http, $log, RangeService){

    $scope.range = function() {
      $scope.result = RangeService.range.apply(RangeService, arguments);
      return $scope.result;
    }

    console.log($scope.range()); // this will always be empty, 
           // you need to specify at least 2 arguments for max and min
  };


})();

AngularJS：如何在视图中为控制器$ scope和ng-repeat（it）分配服务方法？

2 个答案: