Angularjs how to access scope data from outside

Question

I have this poller function that polls data every 10000ms which is fine, however I need to be able to access variable from outside so that I can use splice function.

code for service:

'use strict';
//service to get data for analytics page
angular
    .module ('myApp')
    .factory('Analyticshistory', function ($resource) {
        return $resource('analytics_history.json',{}, {'query': {method: 'GET', isArray: false}});
      });

code for controller:

   'use strict';
    angular
        .module('myApp')
        .controller('analyticshistoryCtrl', ['$scope', 'poller', 'Analyticshistory', function ($scope, poller, Analyticshistory) {

            var dataToSplice;
            var pollerAnalyticsHistory;
            pollerAnalyticsHistory = poller.get (Analyticshistory, {delay: 10000});
            pollerAnalyticsHistory.promise.then (null, null, function (data) {


                //this works fine but it splices 
                //data every 10000ms which is not good
                $scope.myData = data.analytics.splice(0,5);


               //I'm trying this to access this outside
               $scope.myData = data.analytics;
               dataToSplice = $scope.myData;

              });

             //outside the poller here I want to access data and splice them
             //to pass them into to ng-grid
             dataToSplice.splice(0,5);//this does not work
             $scope.myData.splice(0,5);//this doe not work either


             $scope.gridOptions = {
                data: 'myData',
                columnDefs: 'columns'
             }
 }]);

what am I doing wrong here?

many thanks for help

PLUNKER: http://plnkr.co/edit/ui279rL9JZvxgUJXlkLB?p=preview

You should turn the pooling into a service that can be then injected into controllers where needed — maurycy
– maurycy, Commented Aug 14, 2014 at 11:36
sorry for my ignorance, but I don't know how to implement it or your solution will work? see the service above. many thanks — angular_learner
– angular_learner, Commented Aug 14, 2014 at 11:46

Community · Accepted Answer · 2017-05-23 11:44:27Z

1

looks like poller.get is an asynchronous call . So by the time you call dataToSplice.splice(0,5); data may not be present there in dataToSplice.

Thats the reason why splice doesn't work outside promise.then()

//outside the poller here I want to access data and splice them //to pass them into to ng-grid dataToSplice.splice(0,5);//this does not work $scope.myData.splice(0,5);//this doe not work either

Now you have two options -

continue with the way you are doing as option 1
or setup a separate event handler (this can be done in same Controller or another controller) and call $emit inside pollerAnalyticsHistory.promise.then

Look at my post on how to handle events (through $on and $emit) Angular Js newbie - link in a controller view that triggers another controller action

Edit : (this should work) -

angular
    .module('myApp')
    .controller('analyticshistoryCtrl', ['$rootScope', '$scope', 'poller', 'Analyticshistory', function ($rootScope, $scope, poller, Analyticshistory) {


$rootScope.$on("SpliceHandler", function(evt, next, current) {
           $scope.myData.splice(0,5);
}

pollerAnalyticsHistory.promise.then (null, null, function (data) {

           //I'm trying this to access this outside
           $scope.myData = data.analytics;
           dataToSplice = $scope.myData;

$scope.$emit("SpliceHandler");
}

}]);

Edit(8/16/2014) : Check out here : http://plnkr.co/edit/xkQM7NA91JlmHcxat0Qn?p=preview

Edit(8/18/2014) : forgot to unbind the listener. plunk updated.

edited May 23, 2017 at 11:44

CommunityBot

11 silver badge

answered Aug 14, 2014 at 11:46

Rabi

2,23019 silver badges18 bronze badges

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

4 Comments

angular_learner Over a year ago

can you please help me with my question, Plunker is added. I really appreciate your help.

Rabi Over a year ago

I have updated your plunk, its working now and this is exactly what I had described in my answer. plnkr.co/edit/ui279rL9JZvxgUJXlkLB

angular_learner Over a year ago

Your solution is not working. It works only when you load the page for the first time. Now, if you click the platform tab and then you navigate back to the Summary page, the data are being spliced again. If you repeat this action or if you click between the pages a few times, data are being lost/spliced completely and the table is empty :(

Rabi Over a year ago

forgot to add this line - $scope.$on('$destroy', spliceHandle); plunk updated - plnkr.co/edit/xkQM7NA91JlmHcxat0Qn?p=preview . Please check out.

Ashisha Nautiyal · Accepted Answer · 2014-08-14 11:50:59Z

0

You can use $rootscope.broadcast in service and then listen for it in controller by $scope.on

answered Aug 14, 2014 at 11:50

Ashisha Nautiyal

1,3952 gold badges19 silver badges39 bronze badges

4 Comments

angular_learner Over a year ago

how would I implement your solution with my code above?

angular_learner Over a year ago

sure, give me sometime. I need to do something now. I appreciate your help.

angular_learner Over a year ago

Plunker added. So each time you go back to summary page the data are being spliced each time:(

angular_learner Over a year ago

can you please help me with my question, Plunker is added. I really appreciate your help.

Collectives™ on Stack Overflow

Angularjs how to access scope data from outside

2 Answers 2

4 Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related