Question

我在使用ng-repeat显示任何数据时遇到了一些问题。

流程如下

我在从服务器请求数据之前调用sharedObjects服务，以防所需数据已加载并可用。

加载部分工作，并显示在控制台中。为测试目的设置了超时，并且页面将保持加载视图，直到加载数据。但这些行没有第一次出现。转到另一个页面并返回相关页面后，数据显示正常，并从sharedObjects服务加载。

我的代码如下

// dataService aka sharedObjects
angular.module('app').factory('dataService', function(){
    var List = undefined;
    return {
        getList: function () {
            return List;
        },
        setList: function (list) {
            List = list;
        },
    }
});

// controller
angular.module('appWebmenu').controller('appWebmenuController', ['$scope', 'dataService', 'webmenuService', function($scope, dataService, webmenuService){
    $scope.listLoaded = false; // data is not loaded flag
    $scope.listError = false;  // no errors occured yet flag
    // function to load and pass the data to the ng-repeat
    $scope.getItemList = function(){
        // trying for preloaded data
        $scope.itemList = dataService.getList();
        console.log($scope.itemList);
        if($scope.itemList === undefined){
            // data not previously loaded get from server (service)
            $scope.itemList = webmenuService.getWebmenuList($scope.shop_id,$scope.token)
                // after data loads promise returned
                .then(
                // on success
                function(data){
                    // by adding the extra call to the dataService, it works. Brilliant
                    $scope.itemList = dataService.getList(); 
                    $scope.listLoaded = true; // set the data as loaded
                    return data;
                },
                // on failure
                function(data){
                    $scope.listLoaded = false; // data still not loaded
                    $scope.listError = true;   // an error has occured
                    alert(data.errorMessage);
                });

        }
        else{
            $scope.listLoaded = true; // data returned from preloaded dataService
        }
        return $scope.itemList;
    };



// dataRetrieval which connects to the server

angular.module('appWebmenu').factory('webmenuService', ['$q','$http', 'dataService','$timeout', function($q, $http, dataService, $timeout){
    return {
        getWebmenuList: function (shop_id, token) {
            var dfr = $q.defer();      // init promise
            // set retrieval settings
            var req = {
                method: 'POST',
                url: "../api/v1/Webmenu/menulist/all",
                headers: {
                    'Content-Type': 'application/json'
                },
                data: {shop_id: '' + shop_id,token: '' + token }
            };
            // execute retrieval request
            $http(req)
                // when loaded
                .then(
                    // on success
                    function(response){
                        dataService.setList(response.data); // setting the data to the dataService for reuse
                        $timeout(function(){
                            dfr.resolve(response.data);
                        },5000);
                    },
                    // on failure
                    function(response){
                        dfr.reject( false );
                    });
                return dfr.promise;
        }
    };

}]);

// directive

angular.module('appWebmenu').directive('appWebmenuList', function() {
    return {
        //require: '^appWebmenu',
        transclude: true,
        templateUrl: 'external/appWebmenu/appWebmenuListTemplate.html',
        controller: 'appWebmenuController',
        scope: {
        },
        link: function(scope, el, attr, ctrl) {
        }
    }
});

// Template

<!-- to show while loading -->
<div ng-if="!listLoaded">  // corresponds with $scope.listLoaded in the controller
    <i class="fa fa-spinner fa-spin fa-3x"></i>
</div>
<!--show when an error occures-->
<div ng-if="listError">    // corresponds with $scope.listError in the controller
    {{ 'ERROR_LOADING' | translate }}
</div>

<!-- show when data is loaded and no errors occured-->
<div ng-if="listLoaded && !listError && itemList">  // check if list is loaded, no errors occured and if itemList is not empty or undefined
    <table class="webmenu-table-main">

        <thead>
            <tr>
                <th>{{'PAGE' | translate}}</th>
                <th>{{'ACTIONS' | translate}}</th>
            </tr>
        </thead>
        <tbody>

            <tr ng-repeat="item in itemList">

                <script>console.log('menu name is {{ item.menu_name }}');</script>
                <td>{{item.menu_name}}</td>
                <td>
                    <i class="fa fa-search" title="{{ 'DETAILS' | translate }}" ng-click="details(item.menu_id)" ng-if="item.menu_is_editable != '0'"></i>
                    <i class="fa fa-pensil-square" title="{{ 'EDIT' | translate }}" ng-click="edit(item.menu_id)" ng-if="item.menu_is_editable != '0'"></i>
                    <i class="fa fa-trash-o" title="{{ 'DELETE' | translate }}" ng-click="remove(item.menu_id)" ng-if="item.menu_is_editable != '0'"></i>
                    <i class="fa fa-plus" title="{{ 'ADDMENU' | translate }}" ng-click="addNewMenuItem(item.menu_id)"></i>
                    <i class="fa fa-external-link-square" title="{{ 'OPENEDITOR' | translate }}" ng-click="openInEditor(item.menu_id)" ng-if="item.menu_is_editable != '0'"></i>
                </td>
            </tr>
        </tbody>
    </table>
</div>

我有什么遗失的吗？这仅适用于第一次预加载数据后的时间。

Answer 1

webmenuService.getWebmenuList返回一个promise。不是数据。您需要在then函数调用中设置$ scope.itemList。

if($scope.itemList === undefined){
    // data not previously loaded get from server (service)
    var qListPromise = webmenuService.getWebmenuList($scope.shop_id,$scope.token)
            // after data loads promise returned
            .then(
            // on success
            function(data){
                $scope.listLoaded = true; // set the data as loaded
                return data;
            },
            // on failure
            function(data){
                $scope.listLoaded = false; // data still not loaded
                $scope.listError = true;   // an error has occured
                alert(data.errorMessage);
            });

     qListPromise.then(  function(data)  { $scope.itemList = data;
               }).catch( function(error) { throw error; });

ng-repeat在加载后不显示表行

1 个答案: