Question

我有一个非常简单的AngularJS应用程序，我试图显示一个记录列表。

我的主要index.html代码是：

<div id="employeeApp" ng-app='employeeApp' ng-controller='EmployeeController'>
    <div ng-view=""></div>
</div>  

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.js"></script> 
<script src="js/controller.js"></script>

list.html局部视图如下所示：

div id="listView">
<ul>
    <li name="DataContainer" ng-repeat='employee in employees'>
        <table>
            <tr><td>
                <img ng-src='{{employee.image}}'></img>
            </td></tr>
            <tr><td align="center">
                <span name="Name" class="outputData">
                    <a href="#" ng-click="getEmployeeDetail(employee.id)"><div>{{employee.name}}</div><div>{{employee.title}}</div></a>
                </span>
            </td></tr>
        </table>
    </li>
</ul>

controller.js代码如下：

var app = angular.module('employeeApp', ['ngRoute']);
app.service('EmployeeService', ['$http', function ($http){

this.getEmployees = function () 
{
    return $http.get(baseURL);
};

this.getEmployee = function (id) 
{
    return $http.get(baseURL + '/' + id);
};}]);

app.config(['$routeProvider', function($routeProvider){    $routeProvider
  .when('/employees', {
      templateUrl: 'partials/list.html'
  })
.when('/employees/:employeeId', {
      templateUrl: 'partials/edit.html'
})
.otherwise({ // default
      redirectTo: '/employees'
});}]);

app.controller('EmployeeController', ['$scope', 'EmployeeService', function ($scope, EmployeeService) {
 $scope.employees = EmployeeService.getEmployees();
 console.log($scope.employees);

 $scope.getEmployeeDetail = function (id) 
 {
    $scope.employeeDetail =  EmployeeService.getEmployee(id);
    console.log($scope.employeeDetail);
 }}]);

我的REST服务返回我在浏览器控制台中可以看到的数据，但我的列表没有在页面中呈现。

路由似乎工作正常，因为我可以看到list.html被加载。但由于某种原因，该列表显示2个空记录。

我想知道我的html或控制器中有一些基本错误会破坏代码。

Answer 1

你控制器调用服务位对我来说似乎很奇怪，因为EmployeeService返回$http.get(baseURL)，我会将控制器代码更改为：

app.controller('EmployeeController', ['$scope', 'EmployeeService', function ($scope, EmployeeService) {
 EmployeeService.getEmployees().success(function(data){
 $scope.employees = data;
 console.log($scope.employees);
});

AngularJS ng-repeat不起作用

1 个答案: