CODEWITHSUNDEEP
angularjs
user3450590
user3450590

Reputation: 341

service in angular js not updating

I made a service called exampleservice wherein i made a function called dividee(). Below is the code:

confusionapp.service('exampleservice', function($rootScope) {
    this.dividee = function(x, y) {
        $rootScope.enteredone = x;
        $rootScope.enteredtwo = y;
        $rootScope.showdivideresult = x / y;
    }
});

Now i made 2 inputs where i can enter the values and i thought i would get the divided value in the below div:

confusionapp.controller("conFusionappCtrl", function($scope, exampleservice) {
    exampleservice.dividee(10, 3);
});

html:

<input type="text" ng-model="enteredone" />
<input type="text" ng-model="enteredtwo" />
<button ng-click="dividee(enteredone, enteredtwo);"></button>
<div>{{showdivideresult}}</div>

but what is happening is tat i get the values inserted in the textboxes and get the divided values in the div on load (ie, 10 and 3 in the textboxes and 3.33 in div), but not when i change any value in the textboxes. Please help. Thanks in advance

Upvotes: 1

Views: 58

Answers (3)

Satpal
Satpal

Reputation: 133403

You should not use $rootScope in service. Create the function which performs desired operation and return data.

You also need to define a function dividee in the controller scope to use it from view.

var confusionapp = angular.module('confusionapp', []);
confusionapp.service('exampleservice', function() {
  //Perform operation on input and return data
  this.dividee = function(x, y) {
    return x / y;
  }
});

confusionapp.controller("conFusionappCtrl", function($scope, exampleservice) {
  //define the dividee which will be execute on click handler
  $scope.dividee = function(enteredone, enteredtwo) {
    //persists the returned data
    $scope.showdivideresult = exampleservice.dividee(enteredone, enteredtwo);
  }

  //Set default values
  $scope.enteredone = 10;
  $scope.enteredtwo = 3;
  //Call method to set initial value
  $scope.dividee($scope.enteredone, $scope.enteredtwo);
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="confusionapp" ng-controller="conFusionappCtrl">
  <input type="text" ng-model="enteredone" />
  <input type="text" ng-model="enteredtwo" />
  <button ng-click="dividee(enteredone, enteredtwo);">Divide</button>
  <div>{{showdivideresult}}</div>
</div>

Upvotes: 2

Frogger
Frogger

Reputation: 185

Its because the dividee function is not a part of the conFusionappCtrl controller so it cannot be found.

What happens initially is when you reload the page the exampleservice.dividee(10,3); gets executed and the values for enteredone, enteredtwo and showdivideresult are set and bound to the view elements.

You need to add a function to the controller scope to handle the button click event.

confusionapp.controller("conFusionappCtrl", function($scope, exampleservice){    

    this.divide = function(x,y){    
        exampleservice.dividee(x,y); 
    }    
});

And call that function in ng-click

<button ng-click="divide(enteredone, enteredtwo);"></button>

Upvotes: 0

Serginho
Serginho

Reputation: 7490

The answer is in this line <div>{{showdivideresult}}</div>

When you write this in the template {{showdivideresult}} you are printing the controller scope variable, NOT the $rootScope.

confusionapp.controller("conFusionappCtrl", function($scope, exampleservice){

$scope.showdivideresult = 'That the variable you are printing';


});

Don't confuse the $rootScope service with the controller scope (this is you have to use in your template).

So, to make this work, you have to return the value from service function to your controller and insert it into controller scope.

$scope.dividee = function(value1, value2) {
    $scope.showdivideresult = exampleservice.dividee(value1, value2);
  }

Upvotes: 0

Related Questions