Is it possible to access scope data in a returned success promise using resource

Question

I have look up all related questions on stackoverflow but did not find any relevant answer. Maybe it's the elephant in the room that only I can't see but after wasting an entire day on this, I would really appreciate if someone can offer some insight. I have a controller with a scope variable $scope.fruits that is using resource to post data to /fruits (contrived example)

.controller('FruitsController', ['$scope', 'addFruitsFactory', 'sliceFruitsFactory', function($scope, addFruitsFactory, sliceFruitsFactory) {

        $scope.fruits = {
          seasonal: "",
          imported: "",
          exported: ""
        }

        btn_serveFruits = function() {

          // user selects a list of fruits from a select control in html. 
          // $scope.fruits is successfully bound to this select 
          // $scope.fruits has a list of selected fruits 
          addFruitsFactory.save($scope.fruits).$promise.then(
            function(response) {

              console.log('fruits in scope ' + $scope.fruis);
              // $scope.fruits is empty here. Is it possible to access 
              // $scope data here so it can be passed to the next factory?
              sliceFruitsFactory.slice($scope.fruits);


            },
            function(response) {
              $scope.message = "Error : " + response.status + " " + response.statusText;
            }
          );
        }


      }

Is it possible to access $scope.fruits in the success promise returned by the resource? Your response is greatly appreciated. Thanks!

No reason you can't access it there and it shouldn't be empty unless you have modified that object in code we can't see. Create a demo that reproduces problem. — charlietfl, Apr 17 '17 at 17:30
Really bad practice creating variables that are global like ... `btn_serveFruits = function()` — charlietfl, Apr 17 '17 at 17:32
Thanks a lot for your response! Right!!I do not change it in anyway, I will recheck knowing it should not be empty. Thanks again. — fah, Apr 17 '17 at 18:27
btn_serverFruits is actually $scope.btn_serverFruits = function () and is linked to the html button with ng-click= btn_serverFruits . Is it still bad practice? — fah, Apr 17 '17 at 18:28
no not at all .... that's how angular works. What is shown though is the same as `window.btn_serverFruits = function...` which is very different — charlietfl, Apr 17 '17 at 18:31
update: solved: Thanks a lot charlietfl, because you pointed me in the right direction , I was able to resolve the issue. I was resetting the $scope outside the promise which ended up resetting it. Typical newbie to 'asynchronous programming and angularJS' mistake. Thank you very much! — fah, Apr 17 '17 at 18:37
hey...at least you now understand what was wrong and it sounds like you understand why — charlietfl, Apr 17 '17 at 18:39

score 0 · Answer 1 · answered Apr 17 '17 at 17:37

0

Maybe Im not understanding you correctly. Once you use the resource, the promise should return the object which you can use to populate scope.

service.save($scope.fruits).$promise.then(function(data) {
     $scope.fruits = data;

    //$scope.fruits now has the data to send to another factory/service 
});

answered Apr 17 '17 at 17:37

Kyler Love

901
9
7

Thanks for your response! In this case, the promise does not have any data, all the data is already in the scope object. so addFruitsFActory.save tells the server to do some book keeping and once that is done, sliceFruitsFactory proceeds with the next step of the use case. I only want to reuse the data that is already in the scope....but sliceFruits should only happen if fruits were added successfullly, hence the use of the promise. – fah Apr 17 '17 at 18:22

score 0 · Answer 2 · answered Apr 18 '17 at 06:30

Write the method 'btn_serveFruits' as a scope method as below:

app.controller('FruitsController', ['$scope', 'addFruitsFactory', 'sliceFruitsFactory', function($scope, addFruitsFactory, sliceFruitsFactory) {

        $scope.fruits = {
          seasonal: "",
          imported: "",
          exported: ""
        }

        $scope.btn_serveFruits = function() {

          // user selects a list of fruits from a select control in html. 
          // $scope.fruits is successfully bound to this select 
          // $scope.fruits has a list of selected fruits 
          addFruitsFactory.save($scope.fruits).$promise.then(
            function(response) {

              console.log('fruits in scope ' + $scope.fruis);
              // $scope.fruits is empty here. Is it possible to access 
              // $scope data here so it can be passed to the next factory?
              sliceFruitsFactory.slice($scope.fruits);


            },
            function(response) {
              $scope.message = "Error : " + response.status + " " + response.statusText;
            }
          );
        }
      }

Is it possible to access scope data in a returned success promise using resource

2 Answers2