AngularJS级联下降，依赖下降没有填补

Question

所以我有2个下拉，需要选择才能填充第三个。

问题是，即使数据回来，第三个数据也没有填充。

由于它的设计方式，每个下拉列表都有自己的控制器，另一个下拉列表用于整个窗口。

源小部件：

<select class="form-control" required name="dataDomain"
        ng-model="customFilters.dataDomain.value"
        ng-options="dataDomain.code as dataDomain.shortName for dataDomain in dataDomains"
        ng-change="customFilters.dataDomain.loadExtraData()">
        <option value="" translate>_NONE_</option>
    </select>

源控制器：

(function init() {
    $scope.customFilters = reportsService.filters;

    $scope.customFilters.dataDomain = {
      value: undefined,
      loadExtraData: function() {
              var reportType;
              if(this.containsData() && !this.isDisabled()) {
                  reportType = reportsService.filters.reportType.value;


                  dictionaryService.getCustomReports({"dataDomain": 'WEE', "country": 'UK')
                          .then(function ({data}) {
                            $scope.customReports = data.customReport; 
                      });

              }
          }
    };
})();

目标小部件：

<select class="form-control" required name="custom"
            ng-model="customFilters.custom.value"
            ng-options="c.reportUrl as c.reportName for c in customReports">

            <option value="" translate>_NONE_</option>
</select>

整个窗口控制器：

 $scope.customReports = [];

作为确保我的目标小部件正在查看正确位置的测试，我也在整个窗口控制器中尝试了目标下拉列表中填充了frank和Joe。

$scope.customReports = [{reportUrl:'hello',reportName:'Frank'},{reportUrl:'hello2',reportName:'Joe'}];

为什么在ajax调用之后不会填充下拉列表？ （见编辑3）

编辑1：我从源小部件控制器中删除了多余的ajax调用和条件功能。希望能让它更容易看到。我的括号可能错了。

编辑2：我做了一些调试，源代码中的范围ID是47，目标中的范围ID是50.我不知道这些数字是什么意思，但它表明我没有将我的数据存储在同一个空间。

编辑3：我修复它（只是尝试一切），但我不知道为什么我将customReports数据移动到$ scope.customFilters.customReports所以问题已经改为为什么这是工作!!!!

Answer 1

由于它的设计方式，每个下拉列表都有自己的控制器，另一个下拉列表用于整个窗口。

这是关键！您已在$scope.customReports中定义了wholeController，其范围与您的下拉列表不同。这就是你在$scope.customFilters.customReports中移动它时能够修复它的原因，这与下拉列表的范围相同。

来自angularjs documentation

每个AngularJS应用程序只有一个根作用域，但可能有多个子作用域。

这个blog详细解释了解Angularjs范围$ rootScope和$ scope。