0

我正在尝试使用 Angular 构建一个动态站点。我正在尝试使用setTimeoutwith来模拟加载 HTML 的延迟$q.defer。如果我没有超时，它可以工作，但是一旦我添加超时，数据就不会加载。如果我在不同的视图之间单击，它确实会被填充，所以我知道它正在执行。但 Angular 似乎并没有意识到它终于可用了。

我有一个 HTML 文件，其中包含以下内容：

<div ng-controller="MyCtrl">
  <div id='my-content' ng-view></div>

  <div id='footer'>
    footer here
    <a href="#!/">View 1</a> <a href="#!/view2">View 2</a>
  </div>
</div>

这是view1.html：

<div ng-include="'teasers.html'"></div>

这是teasers.html：

<div class='column content' ng-repeat="teaser in data.teasers">
  <div class='button type-overlay' ng-class="{{ 'button-' + ($index + 1) }}">
    <div class='teaser-text'>
      <img class='button-background' ng-src='{{ teaser.img_src }}'>
      <span class='teaser-text'>{{ teaser.name }}</span>
    </div>
  </div>
</div>

这是我的app.js：

var app = angular.module('app', [], function($routeProvider, $locationProvider) {
  $locationProvider.hashPrefix("!");

  $routeProvider.when('/', {
    templateUrl: 'view1.html'
  });
  $routeProvider.when('/view2', {
    templateUrl: 'view2.html'
  });
});

app.factory('data', function($http, $q) {
  return {
    fetchTeasers: function () {
      var deferred = $q.defer();

      setTimeout(function() {
        deferred.resolve([
          {
            "name": "Teaser 1",
            "img_src": "SRC"
          },
          {
            "name": "Teaser 2",
            "img_src": "SRC"
          },
          {
            "name": "Teaser 3",
            "img_src": "SRC"
          },
          {
            "name": "Teaser 4",
            "img_src": "SRC"
          }
        ]);
      }, 5000);

      return deferred.promise;
    }
  }
});

这是controller.js：

function MyCtrl($scope, data) {
  $scope.data = {};
  $scope.data.teasers = data.fetchTeasers();
}

我需要做什么才能deferred在 Angular 中工作？

4

1 回答 1

2

而不是 window.setTimeout 使用角度超时方法：$timeout。请务必通过 DI 加载它。

$timeout(function(){
  // all your magic goes here
});

顺便说一句，您可以使用 setTimeout，但是您需要$scope.$apply()手动调用。事实上，这就是 Angular 在内部所做的。

$scope.$apply(function(){ // all your magic goes here })

但是，正如我所说，只需使用 $timeout。

PS。用户交互后视图更新的原因是它调用脏检查，不幸的是在这种情况下有点太晚了。使用 $apply 或 $timeout 将确保 Angular 在需要时收到有关更改的通知。

聚苯乙烯。虽然我已经发布了这个特定问题的答案，但我应该提一下，在这种情况下，您可以使用$resource，这是一个支持带有承诺的 RESTful API 的角度服务。它也使用基于 $q 的延迟实现。没有必要重新发明轮子，除非你有充分的理由。

于 2013-08-02T21:59:06.517 回答