同时使用http请求、承诺、ng-options和工厂或服务

Using http requests, promises, ng-options, and factories or services together

本文关键字：ng-options 工厂 服务 承诺 http 请求      更新时间：2023-09-26

我试图从我们的数据库中检索选项列表，我试图使用angular来做到这一点。我以前从未使用过服务，但我知道，如果我要在页面上的其他控制器中使用对象中的数据，这将是实现我想要的效果的最佳方式。

我遵循了几个教程，并组合了一个工厂，该工厂发出http请求并返回数据。我已经尝试了几种方法，但出于某种原因，什么都没有发生。它好像从来没有运行过工厂功能，我不知道为什么。

工厂:

resortModule= angular.module('resortApp',[]); 
resortModule.factory('locaService',['$http', function ($http){
    var locaService= {};
    locaService.locations = {};
    var resorts = {};
    locaService.getLocations=
        function() {
            $http.get('/url/url/dest/').success(function (data) {
                locaService.locations = data;   
            });
            return locaService.locations;
        };
    return locaService;
    //This is a function I would like to run in addition to the first one so multiple variables would be stored and accessible 
        /*getResorts:
            function(destination) {
                $http.get('/url/url/dest/' + destination.id).success(function (data) {
                    resorts = data;
                });
                return resorts;
        }*/
}]);

resortModule.controller('queryController',['$scope', 'locaService',   function($scope, locaService) {
    $scope.checkConditional= function (){
            if($("#location").val() == ""){
            $("#location").css('border','2px solid #EC7C22');
            }
    };
    $scope.selectCheck= function (){
        $("#location").css('border','2px solid #ffffff');
        $(".conditional-check").hide();
    };
    $scope.resort;
    $scope.locations= locaService.getLocations();
}]);

我只希望返回数据，然后分配给$作用域。视图中ng-options要使用的位置。然后，我希望我的另一个函数在单击时运行，以便由变量resort填充下一个字段。我该怎么做呢?任何帮助都太好了!谢谢!

$http service返回一个承诺，你的函数应该返回这个承诺。基本上你的getLocations函数应该像下面这样

locaService.getLocations=
    function() {
        return $http.get('/url/url/dest/');
    };

然后在你的控制器中，你应该使用以下承诺来检索这些选项:

locaService.getLocations()
    .then(
        function(locations) // $http returned a successful result
           {$scope.locations = locations;}
       ,function(err){console.log(err)} // incase $http created an error, log the returned error);

在控制器中使用jquery或在控制器中操作dom元素不是一个好的做法，你可以使用ng-style或ng-class直接在视图中应用样式和css类。下面是一个应该如何连接起来的示例:

resortModule= angular.module('resortApp',[]); 
resortModule.factory('locaService',['$http', function ($http){
    var locaService= {
      locations: {}
    };
    var resorts = {};
    locaService.getLocations= function() {
        return $http.get('/url/url/dest/');
    };
    return locaService;
    //This is a function I would like to run in addition to the first one so multiple variables would be stored and accessible 
        /*getResorts:
            function(destination) {
                $http.get('/url/url/dest/' + destination.id).success(function (data) {
                    resorts = data;
                });
                return resorts;
        }*/
}]);

resortModule.controller('queryController',['$scope', 'locaService',   function($scope, locaService) {
    /* Apply these styles in html using ng-style
    $scope.checkConditional= function (){
            if($("#location").val() == ""){
            $("#location").css('border','2px solid #EC7C22');
            }
    };
    $scope.selectCheck= function (){
        $("#location").css('border','2px solid #ffffff');
        $(".conditional-check").hide();
    };
    */
    $scope.resort;
     locaService.getLocations()
    .then(
        function(locations) // $http returned a successful result
           {$scope.locations = locations;}
       ,function(err){console.log(err)} // incase $http created an error, log the returned error);
}]);
相关文章：