CODEWITHSUNDEEP
javascriptangularjsmodel-view-controllerangularjs-scope
Fidel90
Fidel90

Reputation: 1838

AngularJS automatically updating controller data by service

I'm having some basic problems with angular at the moment. I just wrote a service that reads the temperature of an external device in an interval of five seconds. The service saves the new temperature into a variable and exposes it via a return statement. This looks kind of this (simplified code):

angular.service("tempService", ["$interval", function ($interval) {

    //revealing module pattern
    var m_temp = 0,
        requestTemp = function() {//some logic here},
        onResponseTemp = function (temp) {
            m_temp = temp;    
        },
        //some other private functions and vars ...
        foo = bar;

    //request new temperture every 5s, calls onResponseTemp after new data got received
    $interval(requestTemp, 5000);

    return {
        getTemp = function(){return m_temp;}
    }
}]);

I use a controller to fetch the data from the service like this:

angular.controller("tempCtrl", ["$scope", "tempService", function ($scope, tempService) {

    $scope.temp = tempService.getTemp();
}]);

In my view I access it like this:

<div ng-controller="tempCtrl">
        <p>{{temp}}</p>
</div>

But I only get 0 and the value never changes. I have tried to implement a custom Pub/Sub pattern so that on a new temperature my service fires an event that my controller is waiting for to update the temperature on the scope. This approach works just fine but I'm not sure if this is the way to go as angular brings data-binding and I thought something this easy had to work by itself ;)

Help is really appreciated.

Upvotes: 2

Views: 1828

Answers (3)

Sander Elias
Sander Elias

Reputation: 754

You are returning a primitive from your service, if you want to update an primative you need to reftech it. You should return an object, as on object is passed by reference, you get the actual values in your controller.

do this in your service:

return m_temp;

And this in your controller:

$scope.temp =  tempService;

and your view will update as soon as the service gets updated.

Does this help you?

Upvotes: 1

sylwester
sylwester

Reputation: 16498

Please see here http://jsbin.com/wesucefofuyo/1/edit

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

    app.service("tempService", ["$interval", function ($interval) {

        //revealing module pattern
      var m_temp = {
        temp:0,
        time:null

      };


           var requestTemp = function() {
            m_temp.temp++;
            m_temp.time = new Date();

           };

           var startTemp = function() {
        $interval(requestTemp, 3000);
           };
        return {
          startTemp :startTemp, 
          m_temp:m_temp
        };
    }]);

    app.controller('fCtrl', function($scope,tempService){

      $scope.temp =  tempService;
      $scope.temp.startTemp();


    });

Upvotes: 1

A.B
A.B

Reputation: 20445

i think you should use $interval in controller ot in service

$interval(tempService.getTemp(), 5000);

Upvotes: 0

Related Questions