Question

我有问题，当我动态创建angualrjs标签ui时，ng repeat将保持调用select事件函数递归并传递县ID并调用Web API来获取数据。只是想要求解决方案来阻止重复传递县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=""表达式也将被触发，因为它还将激活其子选项卡。

这也是为什么你会运行一个递归地狱调用$scope.selectTotalStatusforByCounty(id)，当你在县标签之间切换，甚至在启动这个html页面时，它会触发这么多ReceptionService.selectAllUserByCounty(countyId) API调用。

在第二级或更高级别的嵌套ng-repeat中，解决方案肯定没有selectAllUserByCounty()作为select=""表达式，因为ng-repeat标签的第一级已经完成了对于整个孩子的标签。

或者甚至更好，尝试更改关于如何在Angular Application运行时中提供数据集合的模式，例如创建服务单例或牺牲第一个API调用以实际加载初始页面加载中的所有内容每当触发(countyID)表达式时，在持久对象内部select=""之间切换的问题，因此每次切换选项卡时都不必进行API调用。

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

停止重复从使用递归调用选项卡ui选择事件

1 个答案: