html - AngularJS 函数不运行

Question

我有以下 Angular 工厂和 Controller 。

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>

我不相信工厂或 Controller 正在运行。控制台中没有记录任何内容，无论是数据还是错误消息。 Angular 正确链接到我的表单，因为没有 {{ }}，而且 ng 应用程序使用 ng-app="carForm"在 body 标记中的 html 顶部声明。 JS 页面正确链接到 html，就像我在它打印的 Angular 函数之外的 console.log 时一样。 Angular 在 head 标记中的 JS 脚本之前加载，我不知道我做错了什么。

Answer 1

你的 factory 没有被纠正，因为你没有传递你的函数作为返回

制造工厂的正确方法

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

But even you change the code it's not work on your controller because you want to return response.data in $http as promise and this not happens, in the case you need $q as injection in your service.

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>