AngularJS - 在等待数据/数据计算时加载图标

Question

我有一个简单的 Angular http.get：

app.factory('countriesService', function($http) {
return {
    getCountryData: function(done) {
        $http.get('/resources/json/countries.json')
        .success(function(data) { done(data);})
        .error(function(error) {
            alert('An error occured');
        });
    }
}
});

示例 .JSON：

{
"NoCities": 66,
"Balance": 2103,
"Population":  63705000,
"CityInfo": [
    {
        "CityName": "London",
        "CityPopulation": "7825200",
        "Facts": {
            "SubFact1": "xzy",
            "SubFact2": "xzy",
            "SubFact3": "xzy",
            "SubFact4": "xzy",
            "SubFact5": "xzy"
        },
    },
    {
        "CityName": "Manchester",
        "CityPopulation": "2584241",
        "Facts": {
            "SubFact1": "abc",
            "SubFact2": "abc",
            "SubFact3": "abc",
            "SubFact4": "abc"
        },
    }

],
"SubmitInfo": null,
"FormAction": null,
"FormController": null,
}

我注意到当我的页面执行 .length 时，有时可能需要一段时间才能加载数据，例如：

<div>
    <a>Countries</a> : {{Countries.length}}
</div>

Angular 是否有某种形式的等待/加载图标，我可以在填充 DIV 中的数据时显示这些图标？

理想情况下是轻量级的，不需要加载库（我的应用程序也在使用 jQuery）

谢谢

Answer 1

这是我通常的做法。就 OZ_ 而言，这需要Font Awesome。 <i> 的类 fa fa-spinner fa-spin 是对该库的引用。

不过，您也可以选择显示/隐藏表示正在加载的.gif。

标记

使用ng-hide 和ng-show 控制将包含您的填充数据的微调器和元素的可见性。

<p class="text-center" ng-hide="dataLoaded">
    <i class="fa fa-spinner fa-spin"></i>
</p>
<div ng-show="dataLoaded">
    <a>Countries</a> : {{Countries.length}}
</div>

JS

在打电话之前，将$scope.dataLoaded 设置为false。然后，在您的 success 块中，将其设置为 true。另外值得注意的是，您需要将$scope 传递给您的工厂。

app.factory('countriesService', function($http, $scope) {
    return {
        getCountryData: function(done) {
            $scope.dataLoaded = false;
            $http.get('/resources/json/countries.json')
            .success(function(data) { 
                done(data); 
                $scope.dataLoaded = true;
             })
            .error(function(error) {
                alert('An error occured');
            });
        }
    }
});

Answer 2

AngularJS 不是 CSS 框架。您可以在 FontAwesome 的 TWBS 中找到加载图标： http://fortawesome.github.io/Font-Awesome/examples/#spinning