Accessing $scope properties from inside a service in AngularJS

Question

I am trying to create a constructor function inside an angular service, which I could then use inside of my different angular controllers. The problem is, my object generated from the constructor needs access to one of the properties on my $scope object in order to function correctly.

I have the implementation working with the functionality I am after, but it involves passing the $scope object into the constructor function as a parameter. Is there a better way to accomplish this? Are there any issues with the way I currently have it implemented?

HTML:

<div ng-app="myApp">
    <div ng-controller="myController">
        <input type="text" ng-model="hello" />
        <br/>{{hello}}
        <br/>{{helloSayer.hello}}
        <br/>{{helloSayer.helloLength()}}
    </div>
</div>

JavaScript:

var myApp = angular.module('myApp', []);

myApp.controller('myController', function myController($scope, myService) {
    $scope.hello = 'Hello from controller';

    $scope.helloSayer = new myService.HelloSayer($scope);
});

myApp.factory('myService', function () {
    var HelloSayer = function (controllerScope) {
        this.hello = 'Hello from service';
        this.helloLength = function () {
            return controllerScope.hello.length;
        };
    };

    return {
        HelloSayer: HelloSayer
    };
});

Here is the working code in a fiddle: http://jsfiddle.net/dBQz4/

mguymon · Accepted Answer · 2014-06-20 17:40:09Z

1

You really do not want to be passing scopes around, they are complicated beasts. More to the point, as a general rule it is a good idea to be explicit about what you are passing around. Don't send the cow if you only need a glass of milk.

var myApp = angular.module('myApp', []);

myApp.controller('myController', function myController($scope, myService) {
    $scope.hello = 'Hello from controller';

    $scope.helloSayer = new myService.HelloSayer($scope.hello);
});

myApp.factory('myService', function () {
    var HelloSayer = function (controller_hello) {
        this.hello = 'Hello from service';
        this.helloLength = function () {
            return controller_hello.length;
        };
    };

    return {
        HelloSayer: HelloSayer
    };
});

answered Jun 20, 2014 at 17:40

mguymon

9,0252 gold badges41 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Josh Taylor Over a year ago

I tried this actually, and it technically it works because the $scope property I need to access is an object. Your example however wouldn't work because primitive types, in this case a string, are passed by value and not by reference.

mguymon Over a year ago

That is easy enough to work with, just add a this.blah to the HelloSlayer to store the controller_hello.

mguymon Over a year ago

It is odd that myService is just passing around a constructor, defeats the purpose of using a Service really. The perk of a service is have an instance that is dependency injected and the same for everything accessing it.

Josh Taylor Over a year ago

Is there a better place than a service in angular to stick a constructor object?

jaf0 · Accepted Answer · 2014-06-20 17:28:58Z

0

It makes perfect sense to pass in the scope that you need to operate on. This will also simplify unit testing the service.

edited Jun 20, 2014 at 17:28

answered Jun 20, 2014 at 17:06

jaf0

1,15810 silver badges20 bronze badges

Collectives™ on Stack Overflow

Accessing $scope properties from inside a service in AngularJS

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related