Access scope inside an angular js factory

Question

I'm using the ionic framework and need to be able to call a popup from muliple places in my code so I thought I would move it into a factory. The popup uses an input field and I want to get the value of it. Normally I would just call $scope.parentGate.answer but because it's in a factory I don't have access to the scope. Any ideas how I can get the value of the input field?

Here's my code:

angular.module('starter.services', [])
.factory('parentGate', function ($ionicPopup, Helpers) {
    return {
        Show: function(scope, SuccessCallback) {
            var first = Helpers.RandomNumber(1, 5) * 10;
            var second = Helpers.RandomNumber(11, 22);
            var title = 'What does ' + first + ' + ' + second + ' equal?'
            // An elaborate, custom popup
            return $ionicPopup.show({
                template: '<h4 class="text-center">' + title + '</h4><div class="list"><label class="item item-input"><input type="number" ng-model="parentGate.answer" placeholder="Answer..."></label></div>',
                title: "Parent Gate",
                //subTitle: title,
                scope: scope,
                buttons: [
                  { text: 'Cancel' },
                  {
                    text: 'Continue',
                    type: 'button-positive',
                    onTap: function(e) {

                      //
                      // I can't access $scope.parentGate.answer here.  
                      // How else can I do it?
                      //
                      if ($scope.parentGate.answer == first + second) { 

                        console.log("correct");
                        SuccessCallback();
                      } else {
                        console.log("wrong!");
                        e.preventDefault();
                      }
                    }
                  }
                ]
            });
        }
    };
});

Please don't access scope inside of a service.

Michael Kang
– Michael Kang

2015-04-25 05:52:45 +00:00
Commented Apr 25, 2015 at 5:52 — Michael Kang
– Michael Kang, Commented Apr 25, 2015 at 5:52

Community · Accepted Answer · 2017-05-23 12:03:08Z

11

In fact, you can access to the scope in your factory. The reason you cannot is there's no such a variable called $scope in your parentGate.show function.

Seems you want to use a factory to pop up a dialog.

I think in your case, you will pass you scope as a parameter when u try to invoke

angular.module("yourApp").controller("testController", function($scope, parentGate){
    parentGate.show($scope, callback);
});

And in your factory, when you try to change the property value under $scope, (onTap callback) you should use scope, not $scope

onTap: function(e) {
    //if ($scope.parentGate.answer == first + second) { 
    if (scope.parentGate.answer == first + second) { 
        console.log("correct");
        SuccessCallback();
     } else {
         console.log("wrong!");
         e.preventDefault();
     }
 }

Here is the demo code.
Here is the reason why we want to change $scope to scope in your onTap callback (Demo Closure)

Hope this will work. : )

edited May 23, 2017 at 12:03

CommunityBot

11 silver badge

answered Apr 25, 2015 at 1:22

Tyler.z.yang

2,4601 gold badge21 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dev01 Over a year ago

I was close. :) Thanks for help.

Collectives™ on Stack Overflow

Access scope inside an angular js factory

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related