AngularJS: как назначить метод обслуживания контроллеру $ scope и ng-repeat (it) в поле зрения?

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-код.

Все, что я изменил здесь от нг-контроллера = "ColorController" в нг-контроллер = "RangeController"

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 
    }; 


})();