How to Pass $rootScope variable from Controller to Service in Angular JS

Question

Please find my code sample below.

Code in Model(HTML Code)

<select ng-model="drpDown1" ng-options="option.Title as option.Title for option in drpDown1Options">
       <option value="">Select a value..</option>
</select> 
<br/>

<select ng-model="drpDown1" ng-options="option.Title as option.Title for option in drpDown2Options">
       <option value="">Select a value..</option>
</select>

For binding values to the above dropDown I am using REST api in SharePoint 2013 App model

And Also, I have lot many such dropdowns..I have to use same code for every dropdown except there will be a change in listname, variable used to bind the values.

So I want to use a service and placed the below code in a service called myService.js

I am using the below Code.

  this.bindDropdown = function (listname,dropDownOptionsVar,$rootScope)        {
        debugger;
        var arr = [];
        var listName = listname;
        var scriptbase = hostweburl + "/_layouts/15/";
        var requestUrl = appweburl + "/_api/SP.AppContextSite(@target)/Web/Lists/getbytitle('" + listName + "')/items?&@target='" + hostweburl + "'";
        var executor = new SP.RequestExecutor(appweburl);
        executor.executeAsync({
            url: requestUrl,
            method: "GET",
            headers: { "Accept": "application/json;odata=verbose" },
            success: function (data) {
                var responseData = JSON.parse(data.body);
                for (var i = 0; i < responseData.d.results.length; i++) {
                    var Title = responseData.d.results[i].Title;
                    var Id = responseData.d.results[i].Id;
                    arr1.push({
                        ID: Id,
                        Title: Title
                    });
                }
                $rootScope.dropDownOptionsVar = arr;
                $scope.$apply();
            },
            error: function (data, errorCode, errorMessage) {
                alert(errorMessage);
            }
        });

    }

I am calling above function of myServicve.js from myController.js as below.

myController.js Code

$rootScope.drpDown1Options ='';
$rootScope.drpDown2Options = '';

mySerivce.bindDropdown("List1",$rootScope.drpDown1Options,$rootScope);
mySerivce.bindDropdown("List2",$rootScope.drpDown2Options,$rootScope);

So the problem here is Its not working fine.. The parameter $rootScope.drpDown1Options is not passed to the function in mySerivce.js

Its working fine only when I am changing the below statement

$rootScope.dropDownOptionsVar = arr;

into

$rootScope.drpDown1Options = arr;
$rootScope.drpDown2Options = arr; individually in individual functions ( By creating one function for binding one dropdwon)

Doesn't make sense to be polluting `$rootScope` for any of this in the first place. Why isn't the data being stored within service? — charlietfl, Sep 07 '15 at 12:01
`$rootScope` is a global variable and should be avoided. do what Charlietfl says and use a service to store the data to be moved between controllers. — Joe Lloyd, Sep 07 '15 at 12:03

Joe Lloyd · Answer 1 · 2015-09-07T13:18:02.977

Creating Global Variables

If you wish to use $rootScope to store your values you should create a run function in app.js where you can instantiate all of them to be used throughout your app. Snippet below

.run(function ($rootScope) {
  $rootScope.variableOne= -1;
  $rootScope.variableTwo= 5;
  $rootScope.variableThree= 50;
})

put this under your line 'angular.module('star...'

Best Practice

Instead of using global variables you should always use a factory or a service to pass data between controllers. You create getters and setters for your data, here is a basic example of a getter and setter (Disclaimer: code has not been run by me).

.factory('yourFactory', function () {
  var someValue = {};
  return {
    get: function () {
        return someValue;
    },
    set: function(value){
      someValue = value;
    }
  };
})

You can then instantiate this service when you need it and get the data from it. You can also ad more detail like adding an int to get a specific value out of your stored list or array.

You can't inject `$scope` into a factory. This solution does not work — charlietfl, Sep 07 '15 at 12:42
modified my code here, this should give you an idea of how to create getters and setters in angularjs. It is only very basic here but you can even use the service to manipulate it more — Joe Lloyd, Sep 07 '15 at 13:19

score 0 · Answer 2 · edited May 23 '17 at 12:29

I think you should push the response values directly to the parameter array after declaring it as an array (see https://stackoverflow.com/a/6605700/1358376 for arguments in javascript)

// in controller
$rootScope.drpDown1Options = [];
mySerivce.bindDropdown("List1",$rootScope.drpDown1Options);


// in service
this.bindDropdown = function (listname,dropDownOptionsVar)              
{
    ...
        success: function (data) {
            var responseData = JSON.parse(data.body);
            for (var i = 0; i < responseData.d.results.length; i++) {
                var Title = responseData.d.results[i].Title;
                var Id = responseData.d.results[i].Id;
                dropDownOptionsVar.push({
                    ID: Id,
                    Title: Title
                });
            }
            $scope.$apply();
        },...
    });

}

(Btw, you were pushing into an array 'arr1' but declare/assign 'arr' - this never would have worked)

But I would also prefer a service instead of rootScope variables

The above method is in Service only and it doesnt make any difference even if I use a temporary array or not because I am going to bind values to a variable which has been declared in Controller. I want to pass every such a variable to a common function in a service each time I am going to bind values to a dropdown — BD's, Sep 08 '15 at 06:15
I edited my answer - try to declare the options variables as an array instead of a string — Rob, Sep 08 '15 at 07:11

How to Pass $rootScope variable from Controller to Service in Angular JS

2 Answers2