Question

给定该服务（仅在服务器上获取json）

SushiServices = angular.module("SushiServices",[])

SushiServices.factory("DataTypeService",["$http",($http)->
    self = {}
    self._data = []
    self._inilialized = false
    return ->
        if  self._inilialized ==false
            $http.get("data/types.json").success (data)->
                self._data = data;
                self._inilialized = true

        return self._data
])

假设我在控制器中使用该服务：

ProductListController = ($scope,$rootScope,$http,$filter,DataTypeService)->
    ### 
        EN : manage product list display 
        FR : gère l'affichage de la liste de produits 
    ###
    $rootScope.types = DataTypeService()

$ rootScope.types用于重复，现在问题很明显： - 当我渲染我的页面时，json尚未成功获取，因此我的中继器中没有任何内容显示。

我如何设计我的应用程序，当某些内容从服务器返回时，模板会自动更新？谢谢

模板：

 <span ng-repeat='type in types'>
        <a href='javascript:void 0;' ng-click="addToSelectedTypes(type.id)" class='label trans' style="font-size: 15px" ng-class="getSelectedClass(type.selected)" >{{type.name | capitalize }}</a>
      </span>

Answer 1

问题是您从服务返回的函数返回self._data。返回整个self对象（来自DataTypeService工厂返回的函数）并调整视图以使用types._data。然后标记应该自动更新。

或者，您可以制作一些预装件，在没有数据的情况下显示：

<div class="preloader" ng-show="!types._initialized"></div>

您的转发器将被隐藏一段时间（并在正确加载数据时显示）：

<div ng-show="types._initialized">
    <span ng-repeat="type in types._data">
        <a href="javascript:void 0;">{{type.name | capitalize }}</a>
    </span>
</div>

AngularJS中的服务定义

1 个答案: