javascript - Cordova 加载工厂数据

Question

我正在尝试在检索数据时实现加载消息的显示。在基本的 js 函数的情况下，它可以工作，但是在使用工厂检索数据的情况下，我在数据之前没有显示任何内容。

部分示例:

<div  Class='' ng-controller="contentsCtrl">

    <div ng-show="contents.news.length" class="">
    <div  ng-show="isloading"><br><img src="img/loader.gif" alt="" align='center'><br><br></div>
          <ul id="tournois-list" ng-show="!isloading">
                <li ng-repeat="content in contents.news track by $index">
                    <div class="tournois ">
                        <div class='row'>
                            <span class='contents_title'>{{content.content_title}}</span>
                        </div>
                         <div class='row'>
                            <span class='contents_dates'>{{content.content_date | date:'dd-MMMM-YYYY'}}</span>
                        </div>
                         <div class='row'>
                            <span class='contents_intro'>{{content.content_intro | htmlToPlaintext}}</span>
                        </div>
                    </div>
                </li>
            </ul>
    </div>
 </div>

Controller +工厂的代码

baclyApp.controller('contentsCtrl',function($scope,contents){
    $scope.isloading=true;
    $scope.contents=contents.list();

    console.log($scope.contents);
    $scope.isloading=false;
})


baclyApp.factory("contents",function($http,$cookies){
    var urlphp="http://bacly.fr/baclymphp/";
    var contents={};   
    $http.get(urlphp+"getContent.php").then(function(response)
     {
         contents.news = response.data;
     })
    return {
        list: function(){
            return contents;
        }
    }

})

我想这与 Controller 注入(inject)工厂对象的时间有关，因此需要解决它或类似的问题，但我不知道如何以另一种方式做到这一点。

谢谢!

更新:这里是我正在讨论的具有多个 get 的另一个 Controller

baclyApp.factory("tournois",function($http,$q){
//Factory qui recupère les données de tournois et iscriptions
    // var urlphp="http://localhost/cordova/mbacly/www/php/";
    var tournois={};
    var urlphp="http://bacly.fr/baclymphp/";
        $http.get(urlphp+"getTournois.php").then(function(response)
         {
             tournois.tournois = response.data;
             console.log(tournois);
         },function(status) {
            alert("pas d acces réseau") 
            })

        $http.get(urlphp+"getTournoinscriptions.php").then(function(response)
         {
             tournois.inscriptions = response.data;
         },function() {
            alert("pas d acces réseau") 
            });

        $http.get(urlphp+"getTournoinscris.php").then(function(response)
         {
             tournois.inscris = response.data;
         },function() {
            alert("pas d acces réseau") 
             });

        $http.get(urlphp+"getUsers.php").then(function(response)
         {
             tournois.users = response.data;
         },function() {
            alert("pas d acces réseau") 
            });


    return {

        list: function(){
            return tournois;
        },
        find: function(cid){
            return _.find(tournois.tournois, function(t) {return t.tournois_id === cid});
        },
        findinscris: function(cid){
            return _.filter(tournois.inscris, function(t) {return t.tournois_id == cid});
        },
        findusers: function(uid){
            return _.filter(tournois.users, function(t) {return t.user_id === uid});
        },
        findusersbyname: function(name){
            return _.filter(tournois.users, function(t) {return t.uname === name});
        },
        updateinscription: function($params){
            // var urlphp="http://localhost/cordova/mbacly/www/php/";
            var urlphp="http://bacly.fr/baclymphp/";
            var tournois={};
            var retour="retour-OK";

            $params_encoded =encodeURIComponent(JSON.stringify($params));  
            $http.get(urlphp+"saveinscription.php?data="+$params_encoded).success(function(data){
                // console.log("retour-OK"+data);
                retour="retour-OK";
            });
                return retour;
       },
        insertinscription: function($params){
            // var urlphp="http://localhost/cordova/mbacly/www/php/";
            var urlphp="http://bacly.fr/baclymphp/";
            var tournois={};
            var retour="retour-OK";

            $params_encoded =encodeURIComponent(JSON.stringify($params));  
            $http.get(urlphp+"saveinscription.php?data="+$params_encoded).success(function(data){
                // console.log("retour-OK"+data);
                retour="retour-OK";
            });
                return retour;

        },
        deleteinscription: function($params){
            // var urlphp="http://localhost/cordova/mbacly/www/php/";
            var urlphp="http://bacly.fr/baclymphp/";
            var tournois={};
            var retour="retour-OK";
            $params_encoded =encodeURIComponent(JSON.stringify($params));  
            $http.get(urlphp+"saveinscription.php?data="+$params_encoded).success(function(data){
                // console.log("retour-OK"+data);
                retour="retour-OK";
            });
                return retour;

        }                           
    }
})

Controller (部分):

baclyApp.controller('tournoisCtrl',['$scope','tournois','$cookies','$state','$window','growl',function($scope,tournois,$cookies,$state,$window,growl){
    //Liste des tournois
        $scope.showtournoislist=true;
        $scope.tournois=tournois.list();

.. 然后在 Controller 中

tournois.findinscris(cid)

Answer 1

用这个。当响应出现时，$scope.isloading 将为 false

baclyApp.controller('ContentsCtrl', function ($scope, ContentService) {
    $scope.isloading = true;

    ContentService.getContent("getContent.php", function (contents) {
        $scope.contents = contents;
        $scope.isloading = false;
    }, function () {
        $scope.isloading = false;
    });

    //    contents.getContent("another.php", function (data) {
    //        $scope.contents = data;
    //    });

    console.log($scope.contents);

});

baclyApp.service("ContentService", function ($http, $cookies) {
    var urlphp = "http://bacly.fr/baclymphp/";

    function getRequest(method, url, data, onSuccess, onError) {
        var header = {}
        $http({
            method: method,
            url: urlphp + url,
            data: data
        }).then(function () {
                if (onSuccess) {
                    onSuccess(contents);
                }
            }, function () {
                if (onError) onError();
            });
    }

    function getContent(url, onSuccess, onError) {
        getRequest("GET", url, null, onSuccess, onError);
    }


    function getOtherContent(url, onSuccess, onError) {
        getRequest("POST", url, null, onSuccess, onError);
    }

    return {
        getRequest: getRequest
        getContent: getContent,
        getOtherContent: getOtherContent
    }
});

此外，我建议:

• 服务、工厂、 Controller 名称应大写。方法则不然。

• 使用“服务”来使用 API。

• 使用“工厂”在 Controller 之间传输数据。

更新:

baclyApp.factory("tournois", function ($http, $q) {
//Factory qui recupère les données de tournois et iscriptions
    // var urlphp="http://localhost/cordova/mbacly/www/php/";
    var tournois = {},
        urlphp = "http://bacly.fr/baclymphp/",
        phpFiles = {
            getTournois: "getTournois.php",
            getTournoinscriptions: "getTournoinscriptions.php",
            getTournoinscris: "getTournoinscris.php",
            getUsers: "getUsers.php"
        },
        countResponse = 0;

    function getDate(from, onSuccess, onError) {
        $http.get(urlphp + from).then(function (response) {
            if (response) {
                if (onSuccess) {
                    onSuccess(response)
                }
            } else if (onError) {
                onError()
            }
        }, function () {
            onError();
        })
    }


    getDate(phpFiles.getTournois, function (response) {
        tournois.tournois = response.data;
        countResponse++;
        console.log(tournois);
    }, function () {
        alert("pas d acces réseau");
    });
    getDate(phpFiles.getTournoinscriptions, function (response) {
        tournois.inscriptions = response.data;
        countResponse++;
    }, function () {
        alert("pas d acces réseau");
    });
    getDate(phpFiles.getTournoinscris, function (response) {
        tournois.inscris = response.data;
        countResponse++;
    }, function () {
        alert("pas d acces réseau");
    });

    getDate(phpFiles.getUsers, function (response) {
        tournois.users = response.data;
        countResponse++;
    }, function () {
        alert("pas d acces réseau");
    });


    return {
        getResponseAfterSuccess: function (onSuccess, onError) {
            if (Object.keys(phpFiles).length == countResponse) {
                if (onSuccess) onSuccess(tournois);
            } else {
                if (onError) onError(tournois);
            }
        },
        list: function () {
            return tournois;
        }
        //, more codes
    }
});

baclyApp.controller('tournoisCtrl', ['$scope', 'tournois', '$cookies', '$state', '$window', 'growl', function ($scope, tournois, $cookies, $state, $window, growl) {
    //Liste des tournois
    $scope.showtournoislist = true;
    $scope.isloading = true;
    $scope.tournois = tournois.getResponseAfterSuccess(function (response) {
        $scope.tournois = response;
        $scope.isloading = false;
        $scope.showtournoislist = false;
    }, function (response) {
        $scope.tournois = response;
    });
}]);