javascript - 停止 ng repeat 对选项卡 ui 选择事件进行递归调用

Question

我有问题，当我动态创建 angualrjs 选项卡 ui 时，ng 重复将保持调用选择事件函数递归并传递县 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]);

}());

Answer 1

我不确定你想要达到什么目的，如果这不符合你的要求，请详细说明。

但如果您的问题是使用参数 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="" 表达式也将在其特定父选项卡被激活时被触发，因为它也会激活其子选项卡。

这也是为什么你会运行一个递归 hell 调用 $scope.selectTotalStatusforByCounty(id) 每当你在县选项卡之间切换，甚至在启动此 html 页面时切换。

解决方案绝对不是在第二层或更多层的嵌套 ng-repeat 中将 selectAllUserByCounty() 作为 select="" 表达式，因为第一层ng-repeat 标签已经为整个子标签完成了。

或者更好的是，尝试改变关于你希望如何在 Angular 应用程序运行时中提供数据收集的模式，例如创建服务单例或牺牲第一个 API 调用以实际加载初始页面加载中的所有内容并且仅每当触发 select="" 表达式时，都会在持久对象内的 (countyID) 之间切换，这样您就不必在每次切换选项卡时都调用 API。

如果我没有通过下面的评论表达清楚，请告诉我。