setting value dynamically when old value changed

Question

I have a function mycredits(); to get number of credits available . I have to show it as my notification , when I do certain operation like adding user or offering user, my credits will get reduced. but now I navigate to one page to another only this is working , in same page the credits values are not getting refreshed.

$scope.mycredits = function(){
    $scope.totalCredits = response.json.response.data.totalcredits;
}

$scope.addUser = function(){
if(statuscode == 0){
$scope.mycredits();
}
}

my html :

     <a href="#/credits">
  <i class="fa fa-money"></i> 
<span>CREDITS</span>
 <span class="creditBlock" >{{totalCredits}}</span> 
    </a>

include a working example, where issue can be reproduced. So others can debug it & help you — Nitishkumar Singh, May 31 '18 at 05:37
Possible duplicate of [Angularjs: ng-model doesn't refresh after object change](https://stackoverflow.com/questions/17197349/angularjs-ng-model-doesnt-refresh-after-object-change) — Vikasdeep Singh, May 31 '18 at 05:40
Let me kinow if my answer is helpful , if not ,then explain the scenario better i.e. are you using 2 controllers or doing in the same one — Shashank Vivek, May 31 '18 at 05:42
Check my answer and let me know if it worked for you then. Also, try not to use `$rootScope.totalCredits` as its a bad practive to declare global variables. Go for `events` so that you can trigger other changes in the controller if you place them in `$rootScope.$on` function — Shashank Vivek, May 31 '18 at 06:08

Shashank Vivek · Accepted Answer · 2018-05-31T06:31:01.617

2

Assuming from your scenario, you are changing credit in one controller & you are showing the credit value changes in another controller.

Try emitting events from the controller where you are changing the credit value

$scope.mycredits = function(){
  $scope.totalCredits = response.json.response.data.totalcredits;
  $rootScope.$emit('credit-changed',$scope.totalCredits);
}

and in the another controller where you are displaying the credits, listen to the events like:

$rootScope.$on('credit-changed',function(event,data){
    $scope.credit = data;
})

Check this plunkr

edited May 31 '18 at 06:31

answered May 31 '18 at 05:39

Shashank Vivek

16,888
8
62
104

1

@NicoletaWilskon : In your scenario, using `rootScope` will not give you any noticeable performance improvement. not even of a sec, & this approach is not something that you can `expand` in future to incorporate more things on `credit` change. check https://stackoverflow.com/questions/32761540/why-using-rootscope-with-functions-is-not-recommended. Use the better approach than working on some "one type" scenario. Also, check `comment` in my `js` file of updated plunkr – Shashank Vivek Jun 01 '18 at 16:13

Sravan · Answer 2 · 2018-05-31T06:01:12.347

1

Assign,totalCredits using $rootScope.totalCredits and in html use thew same {{totalCredits}} it will work across all controllers

Controller:

$scope.credits = {};

$scope.mycredits = function(){
    $rootScope.totalCredits = response.json.response.data.totalcredits;
}

$scope.addUser = function(){
    if(statuscode == 0){
        $scope.mycredits();
    }
}

HTML:

<a href="#/credits">
    <i class="fa fa-money"></i> 
    <span>CREDITS</span>
    <span class="creditBlock" >{{totalCredits}}</span> 
</a>

edited May 31 '18 at 06:01

answered May 31 '18 at 05:53

Sravan

18,467
3
30
54

assign `$rootScope.totalCredits`, it will work. please check my answer – Sravan May 31 '18 at 06:01
try not to use `$rootScope.totalCredits` as its a bad practice to declare global variables. Go for events so that you can **trigger other changes** in the controller if you place them in `$rootScope.$on` function. which you cant do without `$watch` in your case(which will be overkill and bad pratice) – Shashank Vivek May 31 '18 at 06:12
even events will take more overhead, since the events will be added on `rootScope`, assiging a `variable` takes less `overhead` than `events`. Also main reason not to use events here because he is on the same page, but differeent controllers – Sravan May 31 '18 at 06:14
Good point ! but what if in future the user wants to do more with change in `credits` ? not just displaying the value. it cant be expanded in future that easily. – Shashank Vivek May 31 '18 at 06:16
even if he changes any value, it can be updated using `rootScope` and also `rootScope` works generally as a scope but among different `controllers`. So he can even play with that variable around. – Sravan May 31 '18 at 06:19
since you have a single page, `event emitter`will be heavy code to register and `emit` events. It may cost performance. So I gave you a simple answer using a `variable` – Sravan May 31 '18 at 07:05

score 0 · Answer 3 · answered May 31 '18 at 05:42

There are 3 possible reasons/solutions for that

You need to add a $watch so you get a hook when the value changes more info can be found here
You need to activate the Digest Loop after the update more info here
Maybe it's better not to use the watch for such feature but fire an event

setting value dynamically when old value changed

3 Answers3