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는 (모두 공장에, 난 그냥 주석하지 않습니다 테스트하는 동안 하나 또는 다른). 나는 구글 크롬 개발 도구에 보니 모두 호출은 동일한 형식으로 데이터를 반환하지만 $의 HTTP 데이터는 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와 아약스가 작동합니다.
각도 아약스 성공 처리기에서 변수를 덮어 쓰지 만 반환 값은 여전히 ​​빈 참조입니다.

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