CODEWITHSUNDEEP
javascriptangularjs
circadian
circadian

Reputation: 158

Updating a 'this' value in a service via a function

I'm quite new to Angular and am trying to understand how everything works. I've been poking around and couldn't find any information on how to do this. So, I've got a service that defines 

this.totalCount = 0;

In my controller, my get request retrieves some emails and then executes a function called addMessage for each message it retrieves. The addMessage function is in my service.

The function in my service looks like this:

this.addMessage = function (messageObj) {
    this.messagesList.push(messageObj);
}

Basically, I am trying to increment this.totalCount each time this function is executed so that it will update and then can be displayed in the view. I have it displaying in the view currently, however its number always remains 0.

I've tried the following:

1.

this.addMessage = function (messageObj) {
    this.messagesList.push(messageObj);
    this.totalCount++;
}

2.

var count = this.totalcount

this.addMessage = function (messageObj) {
    this.messagesList.push(messageObj);
    count++; //and then attempted to display this value in the view but with no luck
}

Any tips would be greatly appreciated.

Upvotes: 0

Views: 58

Answers (3)

changtung
changtung

Reputation: 1624

You pass argument to another function which has different scope than your service. It is trick with assigning current object to variable, which is visible from function. 

var that = this;
this.addMessage = function (messageObj) {
    that.messagesList.push(messageObj);
    that.totalCount++;
}

Should work. So you assign that variable with current object, which is visible in inner function scope. In a function addMessage body, this refers to function scope which is new, and there is no compiler error, but messagesList is a null object and totalCount is incremented, but after program leave function, it's not visible in service, because it is in a function scope which isn't assigned to any variable.

To update service variable as it changes in your controller, use $watch. 

$scope.$watch(function() { 
    return messagesService.totalCount;
    }, function(new,old){ 
        $scope.totalmessagecount = messagesService.totalCount;
       });

First parameter of $watch if function which return observed for change element. Another is standard function to perform operation after update.

Upvotes: 0

Okazari
Okazari

Reputation: 4597

I assume that you're binding the var this way in your controller and your view

Service :

this.totalCount = 0;
this.totalCount++;

Controller :

$scope.totalCount = service.totalCount;

view :

{{totalCount}}

And if you're actually doing it like this, you should face this kind of trouble.

The main problem is that totalCount is a primitive var and doing this.totalCount++ will break the reference. If you want to keep some var you should bind it as a sub-object.

This way :

Service :

this.utils = {};
this.utils.totalCount = 0;
this.utils.totalCount++;

Controller :

//This is the most important part. You bind an object. Then even if you loose the totalCount reference, your object will keep its own reference.
$scope.myServiceUtils = service.utils;

View :

{{myServiceUtils.totalCount}}

Actually in service (it's a matter of taste) i prefer a lot to use the object syntax instead of this (as "this" can be confusing)

This way :

 var service = {};
 service.utils.totalCount = 0;
 service.addItem = function(){
   ...
 }
 return service;

Hope that was your issue.

Upvotes: 0

Jasper Seinhorst
Jasper Seinhorst

Reputation: 1074

try this:

var that = this;
this.addMessage = function (messageObj) {
    that.messagesList.push(messageObj);
}

Upvotes: 1

Related Questions