javascript - AngularJS $http get 不起作用，但 $.ajax 起作用

Question

我是 AngularJS 新手。我似乎无法让 $http 工作。我有以下工厂:

app.factory('employeeFactory', function ($http) {
    var factory = {};

    // get data form controller
    var employees = [];
    var Url = "../../../Employee/GetEmployees";

    // this does not work ----------------------------
    $http.get(Url, { params: { term: 'Step' }}).
      success(function (response, status, headers, config) {
          employees = response.data
      }).
      error(function (response, status, headers, config) {
          alert(error);
      });

    // this works using JQuery ajax ----------------------------
    $.ajax({
        url: Url,
        data: { term: 'Step' },
        dataType: "json",
        type: "GET",
        error: function (request, status, error) {
            alert(error);
        },
        success: function (response) {
            $.each(response.data, function (i, obj) {
                employees.push({ EmployeeName: obj.EmployeeName, EmployeeNumber: obj.EmployeeNumber });
            });
        }
    });

    factory.getEmployees = function () {
        return employees
    };

    return factory;
});

以及以下 Controller :

app.controller('EmployeeController', function ($scope, employeeFactory) {
    $scope.employees = [];
    init();
    function init() {
        $scope.employees = employeeFactory.getEmployees();
    }
});

工厂中的ajax调用有效，但$https不起作用(两者都在工厂中，我只是在测试时注释掉其中一个)。我查看了 google chrome 开发工具，两个调用都以相同的格式返回数据，但 $http 数据未绑定(bind)到 html:

<div class="container">
    <h4>This is view 1</h4>
    Type a name to filter: <input type="text" data-ng-model="employeeSearch" />
    <ul>
        <li data-ng-repeat="employee in employees | filter:employeeSearch | orderBy:'EmployeeName'">{{ employee.EmployeeName  }} - {{ employee.EmployeeNumber }}</li>
    </ul>
</div>

以下是工厂为两次调用返回的格式:

{data: [{EmployeeNumber:123456, EmployeeName:Johnson,Bob},…]
data: [{EmployeeNumber:123456, EmployeeName:Johnson,Bob},…]
    0: {EmployeeNumber:123456, EmployeeName:Johnson,Bob}
        EmployeeName: "Johnson,Bob"
        EmployeeNumber: "123456"

我不明白为什么当两个调用都以相同格式将数据返回到 View 时，$http 方法没有发生绑定(bind)。感谢任何帮助

Answer 1

jQuery ajax 可以工作，因为您推送到返回的引用。
在 Angular ajax 成功处理程序中，您覆盖变量，但返回值仍然是空引用。

因此，要使 Angular $http 函数正常工作，您应该在成功处理程序中执行以下操作:

angular.forEach(response.data, function(value) {
    employees.push(value);
});