9

I have an AngularJS 1.4* application running locally (yet). This app is served by an Laravel 5.1 backend RESTFul API.

I have to make this app that represents a package trip. A package is composed by days, ranging from 0 to N days. Each day have a list of services, ranging from 0 to N services. And a hotel.

My web server, from which my laravel application consumes from, delivers me a pre-setted package, containing a list of days: each one with a list of services and a hotel data (unused so far). On the response I have a list of properties for the package (that don't matter for now) and an array of days, called days_info. That response is being put in the $scope.package, on my PackageController. The PackageController also declares an directive called packageBlock, that consists in a list of days, and some other data for the package.

<div ng-repeat="day in package.days_info" class='row'>
    <div class='col-md-12'>
        <package-days-block></package-days-block>
    </div>
</div>

Inside <package-days-block> directive, I have another to iterate through the list of services inside every day.

<div class='container-fluid' ng-repeat='service in day.services' ng-controller="ServiceController">
    <service-block></service-block>
</div>

That's where the problem begins: to my undestandment, I now have a $scope.service inside my ServiceController. So, I started to change it on my need inside the ServiceController through a $scope.service.

The $scope.service has an attribute called service_id. I put a listener/watcher on it, so at any time the $scope.service.service_id is changed, I ask for another service_table (holds the informations about the services, it's based on the service_id previously choosen or changed by the user), and put it in the $scope.service.table.

// ServiceController
$scope.reloadServicesTable = function(service_id, service_day, date, paxes){
    MandatoryService.getServiceTable(service_id, service_day, date, paxes)
    .then(
        function(service_data) {
            $scope.service.table = service_data;
        }, 
        ...
    );

The reloadServicesTable is called on the watcher for the service_id changes.

// ServiceController
$scope.$watch(
    'service.service_id', // Places the watcher to watch the changes on the service's ID.
    function(new_service, old_service) {
        if( new_service === old_service )
            return; 

        $scope.reloadServicesTable($scope.service.service_id, $scope.service.service_day, $scope.day.date, $scope.package.paxes);

    }
);

The problem starts here: the request for the service's table is called twice when the service_id only changes once.

WHY, GOD, WHY?!

There's another part of my code where I, from the PackageController, run through the entire days_info array and reads the value of an attribute price inside the service.table: service.table.price. In there, I realise that there's two scope's: the one I handling and the other that I have no FREAKING IDEA where it came from!

If I put an console.log($scope); inside the method that runs through the days_info, I get two scopes for every request. This method is on the PackageController.

Any ideas why this is happening?

P.S.: It's my very first AngularJS application, so, take easy if I messed up on something basic...

EDIT:

As pointed out by an fellow on the comments, my question wasn't very reproducible. Sadly, I can't put here only the part I'm having doubts cause I don't have the slightest idea where the problem lies! (I know that this isn't much of help)

I took some screen shots from the Chrome Console:

First, the requestions fired on the change of the service_id

Request log for the service change (ordered by path name)

As you can see, every request is called twice everytime. This is not an one-time-thing. The /api/service/{id}... is the call for the service's table information. The /api/service/by_route/origin/... returns an list of services from one city to another (or the same). One does not interfere on the other.

The other image is the output from a console.log from the PackageController $scope, on the time that the service_id is being changed.

Scopes for the PackageController

As you can see, there's two different scopes. And the b scope is son of the r scope. The r scope is also calling the watcher on the service_id?

The call for the sums price is been called twice from differente places, as you can see in the image below:

Call Stack for the sumPrices method on PackageController

15
  • 3
    Your question is too long and contains a lot of irrelevant information, but lacks a reproducible test case. So it's hard to understand what the problem really is. But the documentation says: *[...] In rare cases, this is undesirable because the listener is called when the result of watchExpression didn't change. To detect this scenario within the listener fn, you can compare the newVal and oldVal. If these two values are identical (===) then the listener was called due to initialization.
    – JB Nizet
    Feb 25, 2016 at 23:23
  • 5
    Usually, using a watch is a bad idea. If you told us, in a simple way, what you want to achieve, we could help you find a better way.
    – JB Nizet
    Feb 25, 2016 at 23:24
  • I am comparing the two values (newValue and oldValue) in the fn called after the compare function. This doesn't seems to be the problem (anymore). Since the function is been systematically called twice! I will put two prints from my request network log and a scope for a request on the change of the service. Feb 26, 2016 at 13:59
  • 1
    Just a shot in the dark, but make sure ServiceController isn't instantiated twice. Also, you have around 8800 watchers which is terrible performance wise. Feb 29, 2016 at 12:23
  • 1
    @DennisBraga you need to make a minimal reproducible example for this question, I checked the fiddle you posted in the chat, but there is only js code. I don't think it is possible to guess what is wrong with your setup. It requires some debugging to find the problem. Mar 4, 2016 at 22:01

2 Answers 2

3

It may solve you issue. Even i had faced exactly the same as you are mentioning.

  1. The reason for me was that, the controller was getting initialized again and there was a separate api call written in that, which was intended to load the page initially.

  2. There can also be a scenario where you have assigned controller twice in the mark up.

2
  • This was exactaly what happened to me! You didn't got the bounty for like 14 sec. =/ Had already assigned to Robert. I was declarind an ng-controller for a div and calling a directive on that same controller, thus, instantiating it twice! That was the issue. Mar 11, 2016 at 12:32
  • 1
    I exactly had the same scenario as described by @DennisBraga, removing declaration of ng-controller from view helped solve the issue.
    – ASN
    Oct 17, 2018 at 22:17
1
+100
<div ng-repeat="day in package.days_info" class='row'>
    <div class='col-md-12'>
        <package-days-block day="day"></package-days-block>
    </div>
</div>

<div class='container-fluid' ng-repeat='service in day.services'>
    <service-block service="service"></service-block>
</div>

Pass day and service down into directives. Use two way binding to pass your day and service changes back up to package.days_info.

Remove your ServiceController It does not make much sense to ng-repeat a controller. <service-block> and <package-days-block> are E directive that handle logic.

Write only one watcher in your PackageController that watch package.days_info When your day or service change, it can simply find out and do something about it.

Just Chill and fix it.

1
  • The problem wasn't exactly that. But, the tip was nice! Very nice. Since I'll probably gonna use it from now on, I'll give you the bounty (and cause it expires in 22 min too). Thanks a lot. Mar 7, 2016 at 11:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.