angularjs 객체 목록이 ng-repeat에 바인딩되지 않았습니다.

Question

ui 라우터 0.2.14와 함께 1.5.5 각도를 사용하고 있습니다. 표시 할 직원 목록보기가 있습니다.

var app = angular.module('app', ['ui.router']); 
 
app.config(function ($urlRouterProvider, $stateProvider, $httpProvider) { 
 
    $urlRouterProvider.otherwise('/'); 
 
    $stateProvider.state('employeeList', { 
 
     url: '/List', 
 
     templateUrl: '../../Templates/EmployeeList.html', 
 
     controller: 'EmployeeListController', 
 
     resolve: { 
 
      employeeListRs: function (dataService) { 
 
       var employeeListRq = getEmployeeListRqInit(); 
 
       return dataService.callApi('GetEmployees', 'post', [employeeListRq]) 
 
        .then(function (data) { return data.data; }); 
 
      }, 
 
      employeeListRq: function(){ 
 
       return getEmployeeListRqInit(); 
 
      }, 
 
      greeting: function ($q, $timeout) { 
 
       var deferred = $q.defer(); 
 
       $timeout(function() { 
 
        deferred.resolve('Hello!'); 
 
       }, 1000); 
 
       return deferred.promise; 
 
      } 
 
     } 
 
    }); 
 
    $stateProvider.state('default', { 
 
     url: '/', 
 
     //templateUrl: '../../Templates/EmployeeList.html', 
 
     controller: 'defaultController' 
 
    }); 
 
    $httpProvider.defaults.headers.common = {}; 
 
    $httpProvider.defaults.headers.post = {}; 
 
    $httpProvider.defaults.headers.put = {}; 
 
    $httpProvider.defaults.headers.patch = {}; 
 

 
    var getEmployeeListRqInit = function() { 
 
     return { 
 
      PageNumber: 1, 
 
      PageSize: 10, 
 
      SessionId: "123" 
 
     }; 
 
    } 
 
});

DataService의 래퍼 원본에있는 서비스입니다 다음과 같이

<table class="employeeListContainer"> 
 
    <tr ng-repeat="employee in employees"> 
 
     <td> 
 
      <a ng-bind="employee.EmployeeId" class="employeeId"></a> 
 
      <!--ui-sref="employeeDetails{ employeeId: employee.EmployeeId }"--> 
 
     </td> 
 
     <td ng-bind="employee.FirstName"></td> 
 
     <td ng-bind="employee.LastName"></td> 
 
    </tr> 
 
    <tr> 
 
     <td colspan="3" class="paging"> 
 
      <button ng-disabled="!IsPrevButtonEnabled" ng-click="prevPage()" class="prev-next">&lt;</button>&nbsp; 
 
      <span ng-bind="PageNumber"></span>&nbsp; 
 
      <button ng-disabled="!IsNextButtonEnabled" ng-click="nextPage()" class="prev-next">&gt;</button> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td colspan="3" class="paging"> 
 
      <span ng-bind="ErrorMessage" ng-show="IsError"></span> 
 
     </td> 
 
    </tr> 
 
</table>

내가 응용 프로그램을 구성한 다음과 같이에는 EmployeeList 템플릿입니다 $ http.post 호출. 다음 컨트롤러 코드 :

app.controller('EmployeeListController', function ($scope, employeeListRq, employeeListRs, greeting) { 
 
    $scope.PageNumber = employeeListRq.PageNumber; 
 
    $scope.PageSize = employeeListRq.PageSize; 
 
    $scope.IsError = !employeeListRs.IsSuccess; 
 
    $scope.TotalCount = (employeeListRs.EmployeeList == null) ? 0 : employeeListRs.EmployeeList.TotalCount; 
 
    $scope.employees = (employeeListRs.EmployeeList == null) ? null : employeeListRs.EmployeeList.Employees; 
 
    
 
    if ($scope.employees = null) return 1; 
 
    var remainder = $scope.TotalCount % $scope.PageSize; 
 
    var pageNumber = Math.floor($scope.TotalCount/$scope.PageSize); 
 
    var lastPageNumber = remainder > 0 ? pageNumber + 1 : pageNumber; 
 
    $scope.IsNextButtonEnabled = $scope.PageNumber != lastPageNumber; 
 
    $scope.IsPrevButtonEnabled = $scope.PageNumber != 1; 
 

 
    $scope.IsLoading = false; 
 
    $scope.ErrorMessage = employeeListRs.IsSuccess ? '' : employeeListRs.ErrorMessage; 
 
});

난 볼 동안 $ scope.employees 모든 적절한 필드 및 값 10 개체를 포함하는 배열로 설정되어 크롬 디버깅. 또한 IsPrevButtonEnabled 및 IsNextButtonEnabled도 완벽하게 설정됩니다. 바인딩은 UI에도 완벽하게 반영됩니다. 하지만 직원 목록이 포함 된 표가 표시되지 않습니다. 제가 누락 된 것에 대한 제안 은요?

참고 : 콘솔에서 오류가 발생하지 않습니다. 당신이 시도 할 수

Answer 1

몇 가지 :

(1) 당신이 잘못된 말을하지만, 데이터를 바인딩 할 수있는 좋은 방법은 표현식을 사용하는 것입니다하지 않습니다. 그래서, 대신의 :

<td ng-bind="employee.FirstName"></td> 

이 시도 :

<td>{{employee.FirstName}}</td> 

이 줄은 컨트롤러에서 의심스러운 (2)

: 당신은 null 값을 할당하는 것처럼

if ($scope.employees = null) return 1; 

같습니다 null을 확인하는 대신 $ scope.employees를 사용하십시오. 우리 팀은 존재를 확인하기 위해 angular.isDefined ($ scope.employees)를 사용하려고합니다.

그 라인을 사용하여 무엇을하려합니까?

(3)이 다른 사람들이 그들을 사용 어떻게 서비스를 사용하고 어떻게 볼보다 약간 다른 모양 :

resolve: { 
     employeeListRs: function (dataService) 

그것은 employeeListRs이 약속을 반환하는 나에게 보인다.

내가 일반적으로하는 일은 컨트롤러 내부에서 서비스 (내 모퉁이 서비스가 차례로 $ http 서비스를 호출)를 호출 한 다음 응답 (예상 응답과 오류 응답 모두)을 처리하는 것입니다. 거기서 나는 데이터를 컨트롤러의 모델에 넣는다. 아직 서비스 호출을 내 상태 머신으로 혼합하지 않았습니다. 컨트롤러가 서비스 호출을하도록합니다.

(4)이 CSS 클래스 (employeeListContainer)의 내용은 무엇입니까? 테이블을 숨기는 뭔가있을 수 있을까요? html과 css도 공유하고 싶을 것입니다.