从匿名函数返回 JSON 或任何值 - AngularJS

Question

在以下代码中，我返回调用服务器方法“getUserNames()”，该方法返回 JSON 并将其分配给 main.teamMembers 变量。我正在构建的报告中有一个 viewAll 按钮，该按钮调用下面列出的方法“$scope.viewAllTeamMembers = function($event)”。
现在，查看所有按钮列出了存储在 main.teamMembers 中的所有值，在第一次加载报表时不起作用。但是当我导航到报告中的其他按钮并尝试访问 viewAll 它的工作时。
我询问从匿名返回 JSON 的原因是，我发现当它是一个全局变量时，viewAll 按钮第一次起作用。请帮助我了解我所缺少的。

angular.module('kamApp')
    .controller('MainCtrl', [
        '$q',
        '$rootScope',
        '$scope',
        '$timeout',
        'endpoints',
        'kamService',
        'queries',
        'translations',
        function($q, $rootScope, $scope, $timeout, endpoints, kamService, queries, translations) {

            var getUserNamesRequest = endpoints.getUserNames($rootScope.teamMemberIds).then(function(userDdata){
                return userDdata;
            });

            getUserNamesRequest.then(function(userDdata,$scope)  {

                $rootScope.userNameList = kamService.extractUserNameList(userDdata);

                main.teamMembers=kamService.concatTeamMemberName(
                    main.teamMembersData,
                    $rootScope.userNameList.list
                );

                main.teamMembers.list = kamService.sortList(main.teamMembers.list, 'role', 'name');  

            });
    }]);

--Directive

    angular.module('kamApp')
    .directive('teamMember', function() {

        return {
            templateUrl: 'views/team-member.html',
            replace: true,
            restrict: 'E',
            scope: {
                teamMembers: '=',
                viewSwitch: '=',
                changeReportTitle: '&'
            },
            link: function($scope) {

                $scope.itemLimit = 4;

                $scope.isOddLength = $scope.teamMembers.list.length % 2 !== 0;

                $scope.viewAllTeamMembers = function($event) {
                    $event.target.style.opacity = 0.6;
                    $scope.viewSwitch.dashboard = false;
                    $scope.viewSwitch.teamMember = true;
                    $scope.changeReportTitle()($scope.teamMembers.objectName.plural);
                };
            }
        };
    });

--HTML代码

 "<div class=\"expand-link inline-block-div\" ng-click=\"viewAllTeamMembers($event)\"> \n"+

Answer 1

在示例 1 中，您将 usernames 设置为 getUserNames().then() 返回的承诺，而不是返回值，并且 JSON.stringify(userNames); 在 AJAX 请求完成之前运行。

在示例 2 中，JSON.stringify(userNames); 再次在 AJAX 请求完成之前运行。

您应该将依赖于 result 的代码放在 then 回调中。

var result={};

getUserNames($rootScope.teamMemberIds).then(function(userDdata){
    result = userDdata;
    // Code dependent on result
});

如果你想运行其他依赖于被设置变量的代码

var result={};

var getUserNamesRequest = getUserNames($rootScope.teamMemberIds).then(function(userData){
    result = userData;
    // Code dependent on result

    // return the data so that chained promises get the original data.
    return userData;
});

// Other code dependent on `result` being set.
getUserNamesRequest.then((userData) => {
    // use either `result` or `userData` here.
});