Angularjs: Pass $scope Variable With Service

I have two controllers and in one of them I declared a $scope variable that I would like visible in the second controller. First controller app.controller('Ctrl1', function ($scope

Solution 1:

Yes, it is possible to share the scope variables between controllers through services and factory.But, the $scope variables are local to the controller itself and there is no way for the service to know about that particular variable.I prefer using factory, easy and smooth as butter. If you are using the service of factory in a separate file you need to include the file in index.html

 app.controller('Ctrl1', function ($scope,myService,$state) {
        $scope.variable1 = "One";
        myService.set($scope.variable1);
        $state.go('app.thepagewhereyouwanttoshare');//go to the page where you want to share that variable.
    });

 app.controller('Ctrl2', function ($scope, myService) {
   console.log("shared variable " + myService.get());
});
    .factory('myService', function() {
      functionset(data) {
        products = data;
      }
      functionget() {
        return products;
      }

      return {
        set: set,
        get: get
      }

    })

Solution 2:

You cannot inject $scope dependency in service factory function.

Basically shareable service should maintain shareable data in some object.

Service

.service('share', function () {
    varself = this;
    //private shared variablevar sharedVariables = { };
    self.getSharedVariables = getSharedVariables;
    self.setVariable = setVariable;

    //function declarationsfunctiongetSharedVariables() {
        return sharedVariables;
    }
    functionsetVariable() {
        sharedVariables[paramName] = value;
    }
});

Controller

app.controller('Ctrl1', function ($scope, share) {
    $scope.variable1 = "One";
    share.setVariable('variable1', $scope.variable1); //setting value in service variable
});

app.controller('Ctrl2', function ($scope, share) {
    console.log("shared variable " + share.getSharedVariables());
});

Solution 3:

Your try with service it quite good, but you shouldn't try to use $scope in dependency injection into the service code. Service is meant to be a data provider to you, then if you want to share some data between 2 controllers, you should make place for this data in your service

.service('share', function ($scope) {
    this.variable1 = '';
    return {
        getVariable: function () {
            returnthis.variable1;
        }
        setVariable(variable)
        {
            this.variable1 = variable;
        }
    };
});

app.controller('Ctrl1', function (share) {
    $scope.variable1 = share.getVariable();
});

This is the broader description of this solution: https://stackoverflow.com/a/21920241/4772988

Solution 4:

Best way is really using services. Services have only access to $rootScope, they don't have their own $scope.

However, you shouldn't use scopes for this task. Just make a service with some shared variable outside any scopes.

.service('share', function ($scope) {

    var variable = 42;

    return {
        getVariable: function () {
            return variable;
        }
    };
});

app.controller('Ctrl', function ($scope, share) {
    console.log("shared variable " + share.getVariable());

    // Watch for changes in the service property$scope.$watch(function() { return share.getVariable(); }, function(oldValue, newValue) {
        // whatever
    });
});

Solution 5:

First, your service should be like this:

app.service('share', function () {
    // this is a private variablevar variable1;
    return {
        // this function get/sets the value of the private variable variable1variable1: function (newValue) {
            if(newValue) variable1 = newValue;
            return variable1;
        }
    };
});

To set the value of the shared variable pass the value to the function we created on the service

app.controller('Ctrl1', function ($scope, share) {
    $scope.variable1 = "One";
    // share the value of $scope.variable1
    share.variable1($scope.variable1);
});

To get the value of the shared variable also use the function in the service without passing a value

app.controller('Ctrl2', function ($scope, share) {
    console.log("shared variable " + share.variable1());
});