How to stop $http being called multiple times in an Angular controller

Question

Inside my Controller I have tried to stop $http being called multiple times, but my efforts seem to be in vein.

I only want the report's items to be loaded once.

Have tried checking for items being undefined and having a timesrun variable at the top of the Controller and increasing by 1 at the bottom of it.

if ($scope.items === undefined && $scope.timesrun == 0)
{
    var req = {
      method: 'GET',
            *snipped*
        };

    $http(req).success(function (data, status, headers, config) {
      $scope.items = data;
    }).error(function (data, status, headers, config) {
      SweetAlert.swal("Error " + status, data, "error");
    });
}

I have even had this in a service but the service just gets called multiple times.

I'm clearly missing a trick. I can understand the digest cycle and I do have expressions in the page that need to be checked so I can see why the controller is running multiple times, but I cannot understand how I can get it to exclude the web calls after they've run once.

You need to show a little more code, it sounds like this code is inside a function, that gets called from the view. But we can only guess. There's no reason why your solution w/the timesrun variable or checking for undefined wouldn't work (more guessing on our part as to what you did and why it would've failed). — Sunil D.
– Sunil D., Commented Jul 22, 2015 at 16:29
My guess is that you're calling that controller more than once. Need to provide more code. — Rob
– Rob, Commented Jul 22, 2015 at 16:29
Prompted by your comments I went to dig out some more code, and sure enough there it was. I was calling the Controller again at the top of my HTML for the item, which is part of a Directive - so it was running it for each item in the returned data. Interestingly, it actually only did it once the payload was above 20 items. Anyway, thanks for the comments - it put me in the right direction. — Mike Rouse
– Mike Rouse, Commented Jul 22, 2015 at 16:42

Vish · Accepted Answer · 2015-07-22 17:10:24Z

2

Being called $http service twice or more may be due to many reasons. Few I am listing below:

Do not mention controller (see : omit ng-controller='HomePanel' in html) name in template.

If you are using ngRoute, and mentioning controller name in template, as well in route config, it may be calling twice. For example. In app.js

        app.config([ '$routeProvider', '$sceProvider',
        function($routeProvider, $sceProvider) {
            $routeProvider.when('/', {
                templateUrl : 'Home',
                controller : 'HomePanel',
            });
      }]);

and in HTML:

<script type="text/ng-template" id="Home">
    <div ng-controller="HomePanel">
    </div>
</script>

Don't let you ajax call to cache. So append some random value in end of your URL.

var req = { method: 'GET', url : someUrl + "&random="+ Math.random(); };

Hope this may help.

answered Jul 22, 2015 at 17:10

Vish

8427 silver badges22 bronze badges

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

1 Comment

Mike Rouse Over a year ago

Happy to accept this. It turns out I had a stray ng-controller='HomePanel' inside the HTML for rendering the individual item. Really does pay to comb through the code and make double sure there's no multiple calls to the Controller - especially for relative newcomers like me.

pkn · Accepted Answer · 2015-07-22 16:50:09Z

0

Instead of using $http in controller put it in a function in a custom service and call that function when you want to update data from controller or you can call $http in service and assign it to a variable and use that in controller.

answered Jul 22, 2015 at 16:50

pkn

9810 bronze badges

Collectives™ on Stack Overflow

How to stop $http being called multiple times in an Angular controller

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related