Angular $scope.value not updated when value is evaluated and sent via controller

Question

This is the Fiddle I'm using to learn angular js

In short, JS file being used:

angular.module('ngApp', [])

.service('myownservice', '$q', function ($timeout, $q) {

    this.httpcall = function() {
         var httpresp = "1818";
         //making an http call over here. 
         return httpresp;
    };

    this.UpdateSomeData = function () {
        var defer = $q.defer();
        myownservice.httpcall().then(function(data) {
                defer.resolve(data);
        });
        return defer.promise;
    };
 })
 .controller('ctrl', function ($scope, myownservice) {
    $scope.value = UpdateSomeData();
 });

html page:

<div ng-controller="ctrl">{{value}}</div>

But I'm receiving an error like

Argument 'fn' is not a function, got string.

Any ideas why ?

Oh, and while you're at it, read about [Promise Anti-patterns](http://taoofcode.net/promise-anti-patterns/) — Alon Eitan, Apr 13 '17 at 13:37

tanmay · Accepted Answer · 2017-04-13T13:44:57.940

This had multiple issues.

Firstly, your injections in myownservice were not having [ and ] and $timeout wasn't provided properly.

Next, from within service, you need to access itself by this and not name itself.

Next, you need to return a promise from httpcall method and not just number.

Here's how it should look like,

angular.module('ngApp', [])

.service('myownservice', ['$q', function($q) {
    this.httpcall = function() {
      var defer = $q.defer();
      var httpresp = "1818";
      defer.resolve(httpresp);
      return defer.promise;
      // replace all this with your $http call and return it..
      // it returns promise itself so you wouldn't need to create on your own
    };

    this.UpdateSomeData = function() {
      return this.httpcall(); 
    };
  }])
  .controller('ctrl', function($scope, myownservice) {
    myownservice.UpdateSomeData().then(function(val) {
      $scope.value = val
    })
  });

working fiddle

Here we go, this is correct answer. Good that you also cleaned up deferred anti-pattern from `UpdateSomeData`. — dfsq, Apr 13 '17 at 13:40

score 1 · Answer 2 · answered Apr 13 '17 at 13:34

1

I think this is a very generic way to call a HTTP service and return its response. Please try this

angular.module('ngApp', []).service('myownservice', '$q', function ($timeout, $q) {
    this.UpdateSomeData = function () {
    return $http.get('URL');
};

})

 app.controller('ctrl', function ($scope, myownservice) {
           $scope.value = myownservice.UpdateSomeData(); // Depends on the 
           response, your $scope.value object has to be declared
 });

answered Apr 13 '17 at 13:34

CrazyMac

462
4
19

1

`$scope.value = myownservice.UpdateSomeData();` this is wrong (even though earlier Angular versions would unwrap promise's value for you). You should check how to work with promises properly. – dfsq Apr 13 '17 at 13:35

Dan M. CISSOKHO · Answer 3 · 2017-04-13T13:37:15.777

0

You shouldn't just return the promise like that. Try with something like so :

this.returnUpdateSomeData = function () {
         this.UpdateSomeData().then(function(data) {
                return data;
        });

    };

and you missed the myownservice in the controller

$scope.value = myownservice.returnUpdateSomeData ();

edited Apr 13 '17 at 13:37

answered Apr 13 '17 at 13:33

Dan M. CISSOKHO

1,070
1
12
27

common , it's just a missedtype, no need to be rude it's not very constructive – Dan M. CISSOKHO Apr 13 '17 at 13:36
1

No-no, you didn't understand me: your answer is wrong, you treat promise (async value) like if it was synchronous. It will not work and `$scope.value` will be `undefined` always. Not what OP wants probably. Check this if you want to know how to do it properly: http://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call – dfsq Apr 13 '17 at 13:39

Angular $scope.value not updated when value is evaluated and sent via controller

3 Answers3