angularjs - 为什么我的观察者会因同一个更改而被调用两次？

Question

我有一个本地运行的 AngularJS 1.4* 应用程序(尚未)。此应用程序由 Laravel 5.1 后端 RESTFul API 提供服务。

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

我的 Laravel 应用程序从中使用的 Web 服务器向我提供了一个预先设置的包，其中包含一个日期列表:每个日期都有一个服务列表和一个酒店数据(到目前为止未使用)。在响应中，我有一个包的属性列表(现在不重要)和一组日期，称为 days_info 。该响应被放入 $scope.package 中，在我的PackageController上。 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>

这就是问题开始的地方:据我所知，我现在有一个 $scope.service在我的里面ServiceController 。所以，我开始根据我的需要在 ServiceController 中更改它。通过$scope.service .

$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数组并读取属性 price 的值在service.table中:service.table.price 。在那里，我意识到有两个范围:一个是我处理的，另一个是我没有奇怪的想法它来自哪里!

如果我输入 console.log($scope);在通过 days_info 运行的方法中，我为每个请求获得两个范围。此方法位于PackageController上。

有什么想法为什么会发生这种情况吗？

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

编辑:

正如评论中的一位同事所指出的，我的问题重现性不太好。可悲的是，我不能只把我有疑问的部分放在这里，因为我根本不知道问题出在哪里! (我知道这没有多大帮助)

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

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

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

另一个图像是在 service_id 更改时，来自 PackageController $scope 的 console.log 的输出。

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

对总价的调用从不同的地方被调用了两次，如下图所示:

Answer 1

它可能会解决您的问题。即使我也遇到过和你提到的一模一样的情况。

1. 对我来说，原因是 Controller 再次初始化，并且其中编写了一个单独的 API 调用，旨在最初加载页面。

2. 还可能出现这样的情况:您在标记中分配了两次 Controller 。