我将ui路由器0.2.14与1.5.5一起使用。我有要显示的员工列表视图。EmployeeList模板如下：
<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"><</button>
<span ng-bind="PageNumber"></span>
<button ng-disabled="!IsNextButtonEnabled" ng-click="nextPage()" class="prev-next">></button>
</td>
</tr>
<tr>
<td colspan="3" class="paging">
<span ng-bind="ErrorMessage" ng-show="IsError"></span>
</td>
</tr>
</table>我已将应用程序配置如下：
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是包装到原始$ 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;
});在chrome中调试时，我看到$ scope.employees设置为包含10个对象的数组，这些对象都具有正确的字段和值。IsPrevButtonEnabled和IsNextButtonEnabled的设置也很完美。绑定也完美地反映在UI上。但是我看不到包含员工列表的表。关于我所缺少的任何建议吗？
注意：控制台上没有任何错误。
您可以尝试一些方法：
（1）并不是说您的信息不正确，但是绑定数据的首选方法是使用表达式。因此，代替此：
<td ng-bind="employee.FirstName"></td>
试试这个：
<td>{{employee.FirstName}}</td>
（2）此行在您的控制器中看起来可疑：
if ($scope.employees = null) return 1;
看起来您正在为$ scope.employees指定一个空值，而不是检查是否为空。当我们要检查是否存在时，我/我的团队尝试使用angular.isDefined（$ scope.employees）。
您要在那条线上完成什么？
（3）这与我如何使用服务以及我如何看待其他人使用它们的方式看起来有些不同：
resolve: {
employeeListRs: function (dataService)
在我看来，employeeListRs返回了一个承诺。
我通常要做的是从控制器内部调用服务（我的角度服务，依次调用$ http服务），然后处理响应（预期响应和错误响应）。从那里，我将数据推送到控制器的模型中。我尚未将服务调用混入状态机中-我让控制器进行服务调用。
（4）这个css类-employeeListContainer内部是什么？桌子上藏着什么东西吗？您可能还希望共享html和CSS。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句