为什么我的观察者在同一个更改上被调用两次？

Question

我有一个 AngularJS 1.4* 应用程序在本地运行（还）。此应用由 Laravel 5.1 后端 RESTFul API 提供服务。

我必须制作这个代表旅行团的应用程序。一个包由天组成，范围从0到N天。每天都有一个服务列表，从 0 到 N 个服务。还有一家酒店。

我的 web 服务器，我的 laravel 应用程序从中消费，它为我提供了一个预先设置的包，其中包含一个日期列表：每个日期都有一个服务列表和一个酒店数据（目前未使用）。在响应中，我有一个包的属性列表（现在不重要）和一个天数组，称为days_info。该响应被放入我的PackageController 上的$scope.package。 PackageController 还声明了一个名为 packageBlock 的指令，它包含日期列表和包的一些其他数据。

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

在<package-days-block> 指令中，我每天都有另一个来遍历里面的服务列表。

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

这就是问题开始的地方：令我不解的是，我现在在我的ServiceController 中有一个$scope.service。因此，我开始通过$scope.service 在ServiceController 中根据需要更改它。

$scope.service 有一个名为service_id 的属性。我在上面放了一个监听器/观察器，所以在任何时候 $scope.service.service_id 发生变化时，我都会要求另一个 service_table （保存有关服务的信息，它基于 service_id之前由用户选择或更改），并将其放在$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 在 service_id 更改的观察者上被调用。

// 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);

    }
);

问题从这里开始：当service_id只改变一次时，对服务表的请求被调用了两次。

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

在我的代码的另一部分，我从 PackageController 运行整个 days_info 数组并读取 service.table 中属性 price 的值：service.table.price .在那里，我意识到有两个范围：一个由我处理，另一个我没有 FREAKING IDEA 来自哪里！

如果我在通过 days_info 的方法中放置一个 console.log($scope);，我会为每个请求获得两个范围。此方法在 PackageController 上。

任何想法为什么会发生这种情况？

P.S.：这是我的第一个 AngularJS 应用程序，所以，如果我搞砸了一些基本的东西，请放轻松...

编辑：

正如 cmets 的一位同事所指出的，我的问题不是很可重复。可悲的是，我不能只把我有疑问的部分放在这里，因为我根本不知道问题出在哪里！ （我知道这没什么帮助）

我从 Chrome 控制台截取了一些屏幕截图：

首先，更改 service_id 时触发的请求

如您所见，每个请求每次都会被调用两次。这不是一次性的。 /api/service/{id}... 是对服务表信息的调用。 /api/service/by_route/origin/... 返回从一个城市到另一个城市（或同一个城市）的服务列表。一个不干涉另一个。

另一张图片是来自 PackageController $scope 的 console.log 的输出，此时 service_id 正在更改。

如您所见，有两种不同的作用域。而b 作用域是r 作用域的儿子。 r 范围也在调用service_id 上的观察者？

总价的调用在不同的地方被调用了两次，如下图所示：

Answer 1

它可能会解决您的问题。甚至我也遇到过和你说的一模一样的情况。

1. 对我来说，原因是控制器再次初始化，其中编写了一个单独的 api 调用，用于最初加载页面。

2. 还有一种情况是您在标记中分配了两次控制器。

Answer 2

<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>

将day 和service 传递到指令中。使用两种方式绑定将您的 day 和 service 更改传递回 package.days_info。

删除您的ServiceController ng-repeat 控制器没有多大意义。 <service-block> 和 <package-days-block> 是处理逻辑的 E 指令。

在你的PackageController中只写一个观察者来观察package.days_info 当你的day 或service 改变时，它可以简单地找出并做一些事情。

只需冷静并修复它。