Question

我有以下角度工厂和控制器。

var app = angular.module("carForm", []);

app.factory("dataService", ['$http', function getData($http) {
    function getCars(){
        return $http({
            method: 'GET',
            url: '/data.json'
        }).then(function (response){
            console.log(response.data);
            return response.data
        },function (error){
            console.log("product error");
        })
    };
    return { getCars : getCars }
}]);

app.controller("dataSort", ['dataService', '$scope', function(dataService, $scope) {
    dataService.getCars().then(function(response){
        cars = response;

        $scope.make = [];
        for (key in cars){
            item = cars[key];
            console.log(item);
            $scope.make.push(item);
        }

        $scope.model = [];
        for (key in cars[$scope.selectMake]){
            item = cars[item][key_2]
            $scope.model.push(item)
        }
    })

    search = function(cars){
        cars[$scope.selectMake][$scope.selectModel][$scope.selectType]
    }


}]);

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div class="col-12" ng-contoller="dataSort">
  <div class="row" style="text-align: center;">
    <div class="form-group col-6">
      <label for="inputState">Make</label>
      <select id="inputState" class="form-control">
        <option ng-model="selectMake" selected>Select make</option>
        <option ng-repeat="item in make">{{ item }}</option> 
      </select>
    </div>
    <div class="form-group col-6">
      <label for="inputState">Model</label>
      <select id="inputState" class="form-control">
        <option ng-model="selectModel" selected>Select model</option>
        <option ng-repeat="item in model">{{ model }}</option>
      </select>
    </div>
    <div class="form-group col-3">
      <label for="inputState">Type</label>
      <select id="inputState" class="form-control">
        <option ng-model="selectType"selected>Select make type</option>
        <option ng-repeat="item in type">{{ model }}</option>
      </select>
    </div>
  </div>
</div>

我不相信工厂或控制器都在运行。控制台中未记录任何数据，数据或错误消息均未记录。 Angular已正确链接到我的表单，因为也没有{{}}，而且ng应用程序是使用ng-app =“ carForm”在body标签中的html顶部声明的。就像我在console.log所打印的Angular函数之外打印时，JS页面已正确链接到html。 Angular在head标记中的JS脚本之前加载，我无法弄清楚自己在做什么。

Answer 1

您的factory未更正，因为您没有通过传递函数作为回报

制造工厂的正确方法

app.factory("dataService", ['$http', function($http) {
   var x = {};
   return x;
}]);

但是即使您更改代码，它也无法在您的控制器上运行，因为您想将response.data中的$http返回为promise，但这不会发生，在您需要$q作为服务注入的情况下。

var app = angular.module("carForm", []);

app.factory("dataService", ['$http', '$q', function ($http, $q) {
    var factory = {}

    factory.sample = function() {
        console.log("in factory!");
        return [1,2,3]
    }
    
    factory.getCars = function() {
        var deferred = $q.defer();
        $http.get("api").then(function(response){
           deferred.resolve(response.data);
        })
        return deferred.promise;
    }
        
    return factory;
}]);

app.controller("dataSort", ['dataService', '$scope', function(dataService, $scope) {
    $scope.items = dataService.sample();
    
    //uncomment when your api was ready
    
    //dataService.getCars().then(function(response){
    //    console.log(response);
    //})
}]);

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="carForm" ng-controller="dataSort">
    <ul>
      <li ng-repeat="item in items">{{item}}</li>
    <ul>
</div>

Answer 2

您的工厂实施不正确，请像这样更改。

app.factory("dataService", ['$http', function($http) {
    function getCars(){
        return $http({
            method: 'GET',
            url: '/data.json'
        }).then(function (response){
            console.log(response.data);
            return response.data
        },function (error){
            console.log("product error");
            })
        };
        return { getCars : getCars }
}]);

AngularJS函数无法运行

2 个答案: