javascript - AngularJS:如何将服务方法分配给 View 中的 Controller $scope 和 ng-repeat (it)？

Question

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

我原来的 Controller ，在我试图用服务配置它之前，工作正常，看起来像下面这个 (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;
    };

  };


})();

下面是我试图将它与服务和新 Controller 分开的代码

范围服务.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;
    };

  };


})();

范围 Controller .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>

Answer 1

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

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