Angularjs 不动态更新延迟的HTML

我正在尝试使用Angular创建一个动态站点。我试图通过使用

setTimeout

和

$q.defer

来模拟加载HTML时的延迟。如果我没有超时，它可以工作，但是只要我添加超时，数据就不会加载。如果我在不同的视图之间单击，它会被填充，所以我知道它正在执行。但是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>

下面是

striers.html

：

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

<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>

下面是

controller.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;
    }
  }
});

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

---

我需要做什么才能使

延迟

以角度工作？

而不是窗口。设置超时使用角度超时方法：$timeout。确保通过DI加载它

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

顺便说一句，您可以使用setTimeout，但是您需要手动调用

$scope.$apply（）

。事实上，这就是angular内部所做的

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

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

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

PPS。虽然我已经发布了这个特定问题的答案，但我应该提到，在本例中，您可以使用

$resource

，这是一种角度服务，支持RESTful API，并提供承诺。它还使用基于$q的延迟实现。没有必要重新发明轮子，除非你有充分的理由