阻止ng-repeat在tab ui选择事件中进行递归调用

3

我遇到了一个问题,当我动态创建AngularJS标签页UI时,ng-repeat会不断调用选择事件函数,并传递县ID并调用Web API以获取数据。我只想要一个解决方案来阻止ng-repeat传递县ID并停止API调用。

视图

    <tabset>
<tab ng-repeat="tab in countytabs" heading="{{tab.countyName}}" select="selectAllUserByCounty(tab.countyID)">
    <h3>{{tab.countyName}}--{{tab.phoneNumber}} </h3>
    <tabset>
        <tab heading="All" active="active.all" select="selectAllUserByCounty(tab.countyID)">
            <br />
            <span>Total:{{totalStatusforByCounty.total}}, In:{{totalStatusforByCounty.in}}, Out:{{totalStatusforByCounty.out}}, Unknown: {{totalStatusforByCounty.unknown}} at {{totalStatusforByCounty.lastUpdatedDateTime | date:"MM/dd/yyyy 'at' h:mma"}} </span>
            <br />
            <div ng-repeat="groupUsers in allUserByCounty">
                <h6>
                    <b>{{groupUsers.title}}</b>
                </h6>
                <table ng-repeat="user in groupUsers.users">
                    <tr>
                        <td>{{user.firstName}} {{user.lastName}} Ext:{{user.voiceMailExt}} </td>
                    </tr>
                </table>
            </div>
        </tab>
        <tab ng-repeat="departmentGroup in departmentGroups" heading="{{departmentGroup.name}}" select="selectAllUserByCountyAndDepartmentGroup(tab.countyID,departmentGroup.id)">
            {{departmentGroup.name}}<br />
            {{tab.countyID}}<br />
            {{departmentGroup.id}}<br />

            <div>
                <p>
                    <span>
                        Total:{{totalStatusforByCountyAndDepartmentGroup.total}}, In:{{totalStatusforByCountyAndDepartmentGroup.in}}, Out:{{totalStatusforByCountyAndDepartmentGroup.out}}, Unknown: {{totalStatusforByCountyAndDepartmentGroup.unknown}} at {{totalStatusforByCountyAndDepartmentGroup.lastUpdatedDateTime | date:"MM/dd/yyyy 'at' h:mma"}}
                    </span>
                </p>
            </div>

            <div ng-repeat="groupUsers in allUserByCountyAndDepartmentGroup">
                <h6>
                    <b>{{groupUsers.title}}</b>
                </h6>
                <table ng-repeat="user in groupUsers.users">
                    <tr>
                        <td>{{user.firstName}} {{user.lastName}} Ext:{{user.voiceMailExt}} </td>
                    </tr>
                </table>
            </div>
        </tab>
    </tabset>
</tab>
</tabset>
</div>

javascript

(function(){
    'use strict';

    var app = angular.module('usersboard');

    var ReceptionController = function($scope, ReceptionService){

        $scope.countytabs = '';
        $scope.totalStatusforAllCounties ='';
        $scope.totalStatusforByCounty = '';
        $scope.departmentGroups = '';
        $scope.totalStatusforByCountyAndDepartmentGroup = '';
        $scope.allUserByCountyAndDepartmentGroup = '';
        $scope.allUserByCounty = '';
        $scope.AllUserInAllDepartmentGroupsGroupByCounties = '';
        $scope.AllUsersInDepartmentGroup= '';
        $scope.active = {
            all: false
        };
        $scope.content = 'county';
        $scope.isShown = function (content) {
            return content === $scope.content;
        };

        var selectAllCounties = function(){
            ReceptionService.selectAllCounties().then(function(data){
                $scope.countytabs = data;

            }, function(errMsg){
                console.log(errMsg);
            });
        }
        selectAllCounties();

        var selectTotalStatusforAllCounties = function(){
            ReceptionService.selectTotalStatusforAllCounties().then(function(data){
                $scope.totalStatusforAllCounties = data;
                console.log(data);
            }, function(errMsg){
                console.log(errMsg);
            });
        }
        selectTotalStatusforAllCounties();

        var selectAllDepartmentGroups = function(){
            ReceptionService.selectAllDepartmentGroups().then(function (data) {
                $scope.departmentGroups = data;
                console.log(data);
            }, function (errMsg) {
                console.log(errMsg);
            });
        }
        selectAllDepartmentGroups();

        $scope.selectTotalStatusforByCounty = function (id) {
            if (typeof id !== 'undefined'){
                ReceptionService.selectTotalStatusforByCounty(id).then(function (data) {
                    $scope.totalStatusforByCounty = data;
                    console.log($scope.totalStatusforByCounty);
                }, function (errMsg) {
                    console.log(errMsg);
                });
            }

        }
        $scope.selectTotalStatusforByCountyAndDepartmentGroup = function (countyId, departmentGroup) {
            ReceptionService.selectTotalStatusforByCountyAndDepartmentGroup(countyId, departmentGroup).then(function (data) {
                $scope.totalStatusforByCountyAndDepartmentGroup = data;
                console.log($scope.totalStatusforByCountyAndDepartmentGroup);
            }, function (errMsg) {
                console.log(errMsg);
            });
        }
        $scope.selectAllUserByCountyAndDepartmentGroup = function (countyId, departmentGroup){
            $scope.selectTotalStatusforByCountyAndDepartmentGroup(countyId, departmentGroup);
            ReceptionService.selectAllUserByCountyAndDepartmentGroup(countyId, departmentGroup).then(function (data) {
                $scope.allUserByCountyAndDepartmentGroup = data;

            }, function (errMsg) {
                console.log(errMsg);
            });
        }
        $scope.selectAllUserByCounty = function (countyId) {

                $scope.selectTotalStatusforByCounty(countyId);
                ReceptionService.selectAllUserByCounty(countyId).then(function(data){
                    $scope.allUserByCounty = data;


                }, function(errMsg){
                    console.log(errMsg);
                });

        }

        $scope.selectAllUserInAllDepartmentGroups = function () {

            ReceptionService.selectAllUserInAllDepartmentGroups().then(function (data) {
                $scope.AllUserInAllDepartmentGroupsGroupByCounties = data;

            }, function (errMsg) {
                console.log(errMsg);
            });
        }
        $scope.selectAllUsersInDepartmentGroups = function (departmentGroupId) {

            ReceptionService.selectAllUsersInDepartmentGroup(departmentGroupId).then(function (data) {
                $scope.AllUsersInDepartmentGroup = data;

            }, function (errMsg) {
                console.log(errMsg);
            });
        }


    };

    app.controller('ReceptionController', ['$scope', 'ReceptionService', '$window', ReceptionController]);

}());

你能提供更多信息吗? - user474901
1
请问您能否创建一个 Plunkr/JSFiddle? - Pankaj Parkar
1个回答

2

我不确定你想要达到什么目的,请详细说明如果这不能满足您的要求。

但是,如果您的问题是使用参数CountyId进行递归API调用,请查看您的选择表达式:

...line 83
$scope.selectAllUserByCounty = function(countyId) {
  $scope.selectTotalStatusforByCounty(countyId);
  ReceptionService.selectAllUserByCounty(countyId).then(...

上述方法将调用$scope.selectTotalStatusforByCounty(),正如您在代码行48中看到的那样,它还将使用您的ReceptionService触发另一个API请求。

...line 48
$scope.selectTotalStatusforByCounty = function(id) {
  if (typeof id !== 'undefined') {
    ReceptionService.selectTotalStatusforByCounty(id).then(...

但是,由于你没有提供你想要实现的目标,我假设你是有意使用countyId参数进行递归调用的。虽然使用angular.service可以更好地服务于单例数据,因此你不必每次都调用API,只需让它在Angular应用程序中持久存在即可。

但是,正如你在HTML代码中所看到的:

<tab ng-repeat="tab in countytabs" select="selectAllUserByCounty(tab.countyID)">
    ...
    <tabset>
      <tab heading="All" select="selectAllUserByCounty(tab.countyID)">
      ...

如果您阅读了https://angular-ui.github.io/bootstrap/#/tabs上的文档,您在select=""属性中定义的表达式将始终在您切换选项卡时触发。这也意味着,如果特定父选项卡被激活,ng-repeat下嵌套的select=""表达式也将被触发,因为它也会激活其子选项卡。
这就是为什么每次在县选项卡之间切换时,或者甚至在初始化此HTML页面时都会调用$scope.selectTotalStatusforByCounty(id)并触发如此多的ReceptionService.selectAllUserByCounty(countyId) API调用,从而导致递归陷阱。
解决方案绝不是在第二级或更高级别的嵌套ng-repeat中将selectAllUserByCounty()作为select=""表达式,因为第一级ng-repeat选项卡已经为整个子选项卡执行了此操作。
或者,更好的办法是尝试改变Angular应用程序运行时如何提供数据收集的方式,例如创建服务单例或牺牲第一个API调用以实际加载初始页面中的所有内容,并且只要select=""表达式被触发,就在持久对象中切换(countyID),这样您就不必每次切换选项卡时都进行API调用。
如果我没有表达清楚,请通过下方评论让我知道。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接