Question

我有一个场景，我需要在ng-repeat中动态创建下拉列表，下拉列表的数据源也是动态的，这意味着根据我需要绑定下拉列表的查询。

所以，我决定调用控制器方法，我有一个http get，通过根据查询传递查询，我的服务将返回一个带键值对的通用数据。当我调用控制器方法时，我结束了与infinte循环

错误：$ rootScope：infdig 无限$ digest循环

我的Html

 <table style="width: 100%">
                    <tr>
                        <td colspan="2"><strong>Enter Parameters</strong></td>
                    </tr>

                    <tr ng-repeat="x in reportDataParameter.UserParameterList">

                        <td>{{x.UserParamDefinition.DisplayLabel}}</td>
                        <td>
                            <select ng-model="x.Model" ng-options="item.ValueField as item.TextField for item in executeQuery(x.UserParamDefinition.Query)" class="form-control">
                                <option value="">Please Select</option>
                            </select>
                        </td>
                    </tr>
                </table>

控制器

$scope.reportDataParameter = {};     

    $scope.reportDataParameter = {
        "UserParameterList": [
            {
                "Key": "StateID",
                "Value": "?ddl,State,State",
                "UserParamDefinition": {
                    "DataType": "ddl",
                    "DisplayLabel": "State",
                    "Model": null,
                    "Query": "SELECT Id AS ValueField, BankName AS TextField FROM BankDetail"
                }
            },
            {
                "Key": "FacilityParentID",
                "Value": "?ddl,FacilityParent,FacilityParent",
                "UserParamDefinition": {
                    "DataType": "ddl",
                    "DisplayLabel": "FacilityParent",
                    "Model": null,
                    "Query": "SELECT Id AS ValueField, Name AS TextField FROM Organization"
                }
            }
        ],
        "ReportTitle": "Facility List By Parent",
        "Description": null,
        "ReportPage": null
    };

 $scope.executeQuery = function (query) {
              var baseUrl = 'https://localhost:62';
        return $http.get(baseUrl + '/api/reports/executequery/' + query).then(function (result) {
            return result.data;
        });
    }

Answer 1

首先，请记住，每个摘要周期都会评估您在模板中绑定的函数。每个executeQuery(x.UserParamDefinition.Query)条目的每个摘要周期都会调用ng-repeat。在你的情况下，每个周期是两个函数调用。

此外，每次调用都使用$http查询服务器，因此您每个周期都会查询服务器。

然后，一旦承诺得到解决，您就会在ng-options中使用承诺，启动新的摘要并再次调用您的函数。这就是为什么你最终得到无限循环的原因。除了承诺不是ng-options的有效输入的问题。

你的回调的return result.data;消失得无影无踪，因为它没有受到控制器的约束，也没有executeQuery返回（返回承诺）。

解决此问题的最简单方法是将查询数据绑定到UserParameterList条目中的变量，并在未设置变量的情况下查询服务器。你可以使用getter方法。这样的事情也是可能的：

$scope.executeQuery = function(item) {
    var baseUrl = 'https://localhost:62';
    $http.get(baseUrl + '/api/reports/executequery/' + item.UserParamDefinition.Query)
         .then(function (result) {
             item.queryResult = result.data;
         });
}

在模板中，您只需使用x.queryResult即可。如果UserParameterList没有改变，您可以只运行一次数组并为每个条目执行executeQuery。如果确实发生了变化，您可以使用观察程序跟踪执行executeQuery的更改。如果UserParameterList确实发生了变化，那么您需要考虑并发性，因为在查询运行时项目可能会发生变化＆＃34;并处理它。

带有ng-options的angularJS控制器方法

1 个答案: