4

我正在尝试将功能与控制器分离并将其投入使用，这样我就可以在多个控制器中使用它，而无需在不同控制器之间添加相同的功能。

在我尝试使用服务对其进行配置之前，我的原始控制器工作正常，如下所示（colorController.js）：

颜色控制器.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="ColorController" 到 ng-controller="RangeController"

颜色.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>
4

2 回答 2

2

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

$scope.range = function(max, min, step) {
  $scope.result = RangeService.range(max, min, step);
  return $scope.result;
}
于 2016-01-15T00:06:51.057 回答
1

您没有将参数传递给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
  };


})();
于 2016-01-15T00:08:01.613 回答