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; 
}); 

И следующий контроллер:

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

Аякса вызов в заводских работ, но $ HTTPS не (оба на заводе, я просто закомментируйте один или другой во время тестирования). Я посмотрел в Google Chrome Дев инструментов и оба вызова возвращают данные в том же формате, но данные $ НТТР не привязан к 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" 

Я не понимаю, почему, когда оба вызова возвращают данные в представление в том же формате, привязка не происходит с помощью метода $ http. Любая помощь приветствуется

Answer 1

Аякса JQuery работает, потому что вы толкаете к возвращаемой ссылки.
В угловом обработчике успеха ajax вы перезаписываете переменную, но возвращаемое значение по-прежнему является пустой ссылкой.

Таким образом, чтобы получить угловую $ HTTP функция работает, вы должны выполнить следующие действия в обработчике успеха:

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

Answer 2

использовать этот код:

обслуживание:

app.factory('employeeFactory', function ($http) { 
    var employees = []; 
    var Url = "../../../Employee/GetEmployees"; 
    var factory = { 
    getEmp:function(){ 
     return $http.get(Url, { params: { term: 'Step' }}) 
    } 
    } 
    return factory; 
}); 

контроллер:

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

    function init() { 
     employeeFactory.getEmp().then(function(data){ 
     $scope.employees=data; 
     }) 
     .catch(function(err){ 
     console.log(err); 
     }) 
    } 
    init(); 
});