Javascript AngularJS：显示加载HTML直到加载数据

在数据加载完成之前，如何让AngularJS显示加载微调器

如果我的控制器具有静态设置的

$scope.items=[{name:“One”}]

，以及填充

$scope.items[0]['lateLoader']=“Hello”

，我希望微调器显示，直到AJAX加载完成，然后用检索到的数据填充绑定范围

<ul ng-repeat="item in items">
  <li>
    <p>Always present: {{item.name}}</p>
    <p>Loads later: <span ng-bind="item.lateLoader"><i class="icon icon-refresh icon-spin"></i></span></p>
  </li>
</ul>

始终存在：{{item.name}

稍后加载：

此代码立即填充绑定范围，并且作为

项。lateLoader

为空，微调器将被替换为零

---

我应该如何干净利落地做到这一点？

我将创建自定义指令并使用微调器放置默认标记

这里有一些关于自定义指令的链接

1） 书呆子的视频太棒了

2） 关于指令的官方文件

---

3） angular在60分钟内概述良好

我会根据另一个答案创建一个自定义指令，但以下是如何在没有指令的情况下完成此操作，这可能是在进入更复杂的功能之前学习的一个好主意。。有几件事需要注意：

使用setTimeout模拟ajax调用

加载图标已预加载，并在加载数据时隐藏。只是一个简单的ng hide指令

在我的示例中没有加载图像，只是一些隐藏的文本（显然，您的html将具有正确的css引用）

演示：

视图：

@卢库马

很好的答案，另一种方法是注入$timeout并替换本机超时函数：

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope, $timeout) {

        $scope.name = 'World';
        $scope.items = [{name: "One"}];
        $timeout(function() {
                $scope.$apply(function() {
                        $scope.items[0].lateLoader = 'i just loaded';  
                });
        }, 1000);
});

---

事实上，我已经为此使用了一段时间的解决方案，它非常有效，在我看来比使用超时要好。我正在使用$resource，但是您可以使用$http做同样的事情。在我的$resource对象上，我在下面的代码中添加将loaded设置为true的位

$scope.customer = $resource(dataUrl + "/Course/Social/" + courseName)
    .get({}, function (data) { data.loaded = true; });

然后，在我看来，我可以使用：

ng-hide="customer.loaded"

---

当然，我不会直接在控制器中使用$resource，而是将其提取到customerRepository服务中，但是在这里用这种方式显示更简单。

为什么不将加载器图像静态地放在标记中？我同意这一点，尽管他也可以根据数据是否存在（某些条件）来执行

ng show

或

ng hide

。@lucuma是的，但这似乎是一个很好的可重用的东西，生活在它是自己的指令。我对Angular很陌生-如果你有一个例子或一个到文档的链接，这将非常有帮助，尽管我很高兴自己去寻找文档@JP。我给你放了两个链接，以setTimeout开始。setTimeout只是用来模拟等待，虽然你是对的，但最好使用$timeout。$timeout很有用，因为它会自动将回调包装到$apply中。也就是说，您可以从示例中删除

$scope.$apply（function（）{

），这是迄今为止最好的解决方案。

$scope.customer = $resource(dataUrl + "/Course/Social/" + courseName)
    .get({}, function (data) { data.loaded = true; });

ng-hide="customer.loaded"