AngularJS: how to assign service method to controller $scope and ng-repeat (it) in view?

Question

I'm trying to separate functionality from controller and put it in service so I can use it in multiple controllers without adding same piece of functionality across different controllers.

My original controller, before I was trying to configure it with service, was working fine and looks like this one below (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;
    };

  };


})();

And bellow is the code that I attempt to separate it with service and new controller

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


})();

Output of above console.log($scope.range); is empty array []

If I pass some argument to RangeService, like this:

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

then I can see correct output in the browser.

Now I just need those arguments to be executed within colors.html as shown in below code:

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

And below is html code.

All I changed in here is from ng-controller="ColorController" to ng-controller="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>

score 2 · Answer 1 · answered Jan 15 '16 at 00:06

The problem is in your rangeController.js file. You aren't passing the function parameters along to the RangeService.range. The function in RangeController should be

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

score 1 · Answer 2 · answered Jan 15 '16 at 00:08

You are not passing arguments along to the RangeService.range() function, so the function thinks max and min are undefined.

You could solve this using .apply() to pass along the arguments $scope.range() is called with:

(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: how to assign service method to controller $scope and ng-repeat (it) in view?

2 Answers2