Question

我有这种状态允许用户选择“运动”。当他们选择一项运动时，会通过http调用来拉入该运动的所有服装，该功能如下所示：

set: function (sport) {

    // Update our service
    service.sports.sport = sport;
    service.kits.kit.team.sport = sport.slug;

    // Update our garments
    service.garments.list().then(function () {

        // Save our session
        service.saveSession();
    });
},

问题是，用户“可能”可能尝试导航到下一个子状态。我将验证功能设置为解决方案，以确保用户在进入下一个状态之前已经提交了所有必填字段，如下所示：

validateTeam: function () {

    // If we have no colours selected or the team name has not been set or we have no sport
    if (!service.kits.kit.colour1 || !service.kits.kit.colour2 || !service.kits.kit.team.name || !service.kits.kit.team.sport || $http.pendingRequests.length > 0) {

        // Timeout to trigger digest
        $timeout(function () {

            // Redirect to the first state
            $state.go('designer.team');

            // If no sport has been set
            if (!service.kits.kit.team.sport) {

                // Display a warning
                toastr.warning('You must choose a sport.');
            }

            // If no team name has been set
            if (!service.kits.kit.team.name) {

                // Display a warning
                toastr.warning('You have not entered your team name.');
            }

            // If no colours have been chosen
            if (!service.kits.kit.colour1 || !service.kits.kit.colour2) {

                // Display a warning
                toastr.warning('You must select at least 2 colours.');
            }
        });
    }
},

正如您所看到的，我添加了一行不显示错误，但确实更改了状态：

$http.pendingRequests.length > 0

所以基本上，如果有任何http请求，它会重定向回团队状态（第一个状态）。

这有效，但并不完全符合我的要求。首先，有时它会在重新发布之前闪烁下一个状态，但主要问题是如果我处于子状态（经过所有验证后）并刷新页面，它将始终带我回到团队状态，因为还有其他http请求正在进行。

有没有人知道在设置运动http请求完成之后导航到下一个状态的干净方式如果已经请求了状态更改？

AngularJS ui-route阻止更改状态直到完成http调用

0 个答案: