为什么我的守望者大干快上相同的更改调用两次？ [英] Why does my watcher gets called twice on the same change?

问题描述

我有一个AngularJS 1.4 *应用程序在本地运行（还）。这个程序是由一个Laravel 5.1后端REST风格的API服务。

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

我不得不做出这个应用程序，重新presents一个包之旅。数据包通过天组成，范围从0到N天。每一天都有一个服务列表，范围从0到N的服务。和酒店。

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.

我的Web服务器，从中我laravel应用从消费，送我一个pre-设置好的包，其中包含天的列表：每一个与服务的清单和酒店数据（未使用至今）。在回应我对包的属性（不，现在无所谓）的列表，并天的数组，名为 days_info 。这种反应被放在 $ scope.package ，在我的 PackageController 。在 PackageController 还声明名为 packageBlock 的指令，即由天列表，以及软件包中某些数据。

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>

在＆LT;包天块方式＆gt; 指令，我还有一个通过服务的每一天里的列表进行迭代

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>

这就是问题开始的地方：我undestandment，我现在有一个 $ scope.service 里面我的ServiceController 。于是，我开始改变它在我里面需要的的ServiceController 通过 $ scope.service 。

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.

在 $ scope.service 有称为属性业务标识符。我把一个监听器/观察者就可以了，所以在任何时候在 $ scope.service.service_id 被改变时，我问另一个 service_table （持有关于服务的信息，它是基于对业务标识符previously choosen或由用户改变），并把它放在 $ scope.service.table 。

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;
        }, 
        ...
    );

的 reloadServicesTable 上调用观察者的业务标识符的变化。

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.

上帝啊，为什么为什么？！

有我的code的另一部分，我从 PackageController 的，在整个 days_info 阵列运行，读取的值属性价格的service.table内： service.table.price 。在那里，我认识到，有两个范围的：一个我处理和其他的，我没有的 FREAKING IDEA 它是从哪里来的！

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!

如果我把一个的console.log（$范围内）; 通过运行方法里面的 days_info 的，我得到两个范围为每请求。这种方法是对的 PackageController 的

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：这是我的第一个AngularJS应用程序，因此，如果我搞砸了的东西基本采取简单的...

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

编辑：

正如在注释的老乡指出的那样，我的问题是不是很重现性。可悲的是，我不能把这里只有我有疑虑的部分，因为我没有问题所在丝毫的想法！ （我知道这是没有多大帮助的）

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)

我花了一些屏幕截图来自Chrome的控制台：

I took some screen shots from the Chrome Console:

首先，在业务标识符的变化打响了requestions

First, the requestions fired on the change of the service_id

正如你所看到的，每个请求被称为每次两次。这不是一个一次性事。在 / API /服务/ {ID} ... 是呼吁该服务的表信息。在 / API /服务/ by_route /产地/...从一个城市到另一个（或相同）返回服务的列表。一个不干扰另一方。

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.

其它图像从输出的的console.log 从PackageController $范围，在该业务标识符被改变的时间。

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

正如你所看到的，有两个不同的范畴。和 B 范围是研究范围儿子。在研究范围也在呼吁观察者的业务标识符？

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?

该呼吁的数额价格从differente地叫了两声，因为你可以在下面的图片中看到：

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

推荐答案

这可能会解决你的问题。连我你都在提曾面临完全一样的。

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

1. 原因对我来说，控制器被再被初始化，并有一个独立的API调用写的，其目的是最初加载页面。

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.

有也可以，你已经在标记了指定的控制器两次的情况。

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

这篇关于为什么我的守望者大干快上相同的更改调用两次？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！