Binding variables from Service/Factory to Controllers

Question

I have a variable that will be used by one or more Controllers, changed by Services. In that case, I've built a service that keeps this variable in memory, and share between the controllers.

The problem is: Every time that the variable changes, the variables in the controllers aren't updated in real time.

I create this Fiddle to help. http://jsfiddle.net/ncyVK/

--- Note that the {{countService}} or {{countFactory}} is never updated when I increment the value of count.

How can I bind the Service/Factory variable to $scope.variable in the Controller? What I'm doing wrong?

score 118 · Accepted Answer · answered Apr 15 '13 at 21:47

118

You can't bind variables. But you can bind variable accessors or objects which contain this variable. Here is fixed jsfiddle.

Basically you have to pass to the scope something, which can return/or holds current value. E.g.

Factory:

app.factory('testFactory', function(){
    var countF = 1;
    return {
        getCount : function () {

            return countF; //we need some way to access actual variable value
        },
        incrementCount:function(){
           countF++;
            return countF;
        }
    }               
});

Controller:

function FactoryCtrl($scope, testService, testFactory)
{
    $scope.countFactory = testFactory.getCount; //passing getter to the view
    $scope.clickF = function () {
        $scope.countF = testFactory.incrementCount();
    };
}

View:

<div ng-controller="FactoryCtrl">

    <!--  this is now updated, note how count factory is called -->
    <p> This is my countFactory variable : {{countFactory()}}</p>

    <p> This is my updated after click variable : {{countF}}</p>

    <button ng-click="clickF()" >Factory ++ </button>
</div>

answered Apr 15 '13 at 21:47

jusio

9,850
1
42
57

So essentially, the factory is just a shared (singleton) container for data and functions on the data. You manually manage / sync the data in and out of the $scope? – sambomartin Aug 06 '14 at 09:54
1

@sambomartin right. Great article [here](http://fdietz.github.io/recipes-with-angular-js/controllers/sharing-code-between-controllers-using-services.html) – user4815162342 Aug 13 '14 at 15:14
2

So by passing the function as testFactory.getCount and not invoking it, and invoking it within the UI you have bound the services value. Whereas if you $scope.countFactory = testFactory.getCount() you would just invoke the function once when initialized and nothing is bound? So not updated later if value changes? – mtpultz Oct 09 '14 at 05:01
@sambomartin, factory is not singleton. If you want to have a singleton container use service instead. Service and Factory are basically the same in angular just with the difference that Service is singleton and Factory is not. – Aram May 28 '15 at 08:06
4

@Aram No, a factory is a singleton too; all services in Angular are singletons. When you register a factory function on the module, it will create a service instance when called. – chipit24 Sep 10 '15 at 23:38
thought this was a good example of returning an object from the factory to the controller: http://stackoverflow.com/questions/22906196/update-controller-variable-on-updating-angular-factory-variable – devonj Apr 08 '16 at 22:32

score 0 · Answer 2 · answered Aug 11 '15 at 16:23

It's not good idea to bind any data from service,but if you need it anymore,I suggest you those following 2 ways.

1) Get that data not inside your service.Get Data inside you controller and you will not have any problem to bind it.

2) You can use AngularJs Events feature.You can even send data to through that event.

If you need more with examples here is the article which maybe can help you.

http://www.w3docs.com/snippets/angularjs/bind-value-between-service-and-controller-directive.html

Binding variables from Service/Factory to Controllers

2 Answers2

Linked