0

我的问题是，在页面加载时，当 $routeChangeSuccess 事件触发时，从 AJAX 接收的数据可能还没有准备好。换句话说，我在事件处理程序和 AJAX 之间存在竞争条件。

当事件在页面加载时触发时，如何确保这些数据存在。

这是一个演示问题的小提琴：http: //jsfiddle.net/ajrt4/3/

我的场景：我有一个由$httpAJAX 调用接收到的数据填充的选择框。此选择框用于导航，表示用户可以选择然后前往的一组路线。因为选择框需要让选择的选项始终反映他们当前的路线，所以$routeChangeSuccess当用户在浏览器中使用后退和前进按钮时，我在事件上使用事件处理程序来更改选择的下拉菜单。

这是我的控制器中的一个示例：

$http.get('getData').success(function(data) {
    // Sets the dropdown menu data
    $scope.data = data;
});

$scope.$on("$routeChangeSuccess", function(event, currentRoute){
    // Set the selected option here based off the route
    if (typeof $scope.selected == 'undefined') {
        for (var i = 0; i < $scope.data.length; i++) {
            if ($scope.data[i].name == $routeParams.name) {
                $scope.selected = $scope.data[i]; // sets the current selection based off the route parameter
                return;
            }
        }
    }
});

看法：

<select ng-model="selected" ng-options="option as option.name for option in data"></select>

接收到的数据只需要加载一次，所以我不需要或不想使用resolve它，$routeProvider因为它与另一个控制器和视图一起使用。这也意味着我不会在事件处理程序中嵌套 AJAX 调用并冗余获取数据。我认为可以解决这个问题的是使用 Angular 的$qpromise API，但不确定如何。

4

1 回答 1

0

虽然，它可能不是 Angular 或事件最正确的方法，但我通常在这些场景中所做的是将事件处理程序注册代码放入 .then 块中。在您的情况下，鉴于 $http 服务返回一个承诺，您可以执行以下操作

$http.get('getData').then(function(data) {
    // Sets the dropdown menu data
    $scope.data = data;
    $scope.$on("$routeChangeSuccess", function(event, currentRoute){
    ...
    }
});

但是话又说回来......你正在使用成功，这实际上是相同的。问题是您为什么不将处理程序注册放在成功块中。

于 2014-06-25T12:57:38.107 回答