以下是我的问题，我有一个角度应用，可以使用$scope.users和<tr ng-repeat="user in users" >来显示用户。我使用我构建的sort服务来管理用户的排序方式。该服务有两个主要功能，添加到$scope.users无限滚动效果，或缩小$scope.users进行搜索。从排序服务加载数据后，$scope.users就会更新。
sort.init('users', planocore.data.count, function(res, first_set) {
$scope.users = (first_set) ? res.data.users : $scope.users.concat(res.data.users);
});
这在最初加载此状态时非常有效。但是，如果您从此状态开始，则转换到另一个状态，例如我们的文章说明。然后更改回用户状态，$scope.users正确更新，但<tr ng-repeat="user in users" >未反映更改。
另一个异常现象是，在执行双重状态更改时，搜索更新为$scope.users会更新ng-repeat，只会反映$scope.users.concat(res.data.users)。
以下是我的用户控制器和ui-routes
用户控制器
app.controller("UsersCtrl", ['$scope', 'planocore', 'sort',
function($scope, planocore, helper, sort) {
$scope.users = planocore.data.users;
// Setup of sort logic using sortService name 'sort'
sort.init('users', planocore.data.count, function(res, first_set) {
$scope.users = (first_set) ? res.data.users : $scope.users.concat(res.data.users);
});
$scope.search_by = sort.search_by;
}]);
UI-路由器
app.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('articles', {
url: '/articles',
controller: 'Articles',
templateUrl: view_path + 'articles/users.html',
resolve: {
planocore: function(Planocore){
return Planocore.http('/articles');
}
}
})
.state('users', {
url: '/users',
controller: 'UsersCtrl',
templateUrl: view_path + 'users/index.html',
resolve: {
planocore: function(Planocore){
return Planocore.http('/users/index/id/1/asc/$');
}
}
})
$urlRouterProvider.otherwise('/login');
});
排序服务
app.service('sort', ['Planocore', function(Planocore) {
var sort = this;
var infinity = {set: 1};
// Initializes the sort module
this.init = function(model, count, callback) {
sort.model = model;
sort.count = count;
sort.callback = callback;
reset_sort_params()
reset_infinity_scroll(sort.callback)
}
// Function that is run on submit search
this.search_by = function(search) {
reset_sort_params();
sort.search = (search ? search : "$")
new_load()
}
// Function that is run on changing sort
this.sort_by = function(type) {
infinity.set = 1;
set_order(type)
new_load()
}
// Resetting of sort params
function reset_sort_params() {
sort.type = 'id';
sort.order = 'asc';
sort.search = '$';
infinity.set = 1;
}
function new_load() {
get_data(function(res) {
reset_infinity_scroll(sort.callback)
sort.callback(res, true)
})
}
// This function sets the order of the sort, (asc, desc, no order, asc, ...)
function set_order(type) {
if (sort.type === type) {
if (sort.order === 'asc') {
sort.order = 'desc'
} else if (sort.order === 'desc') {
sort.type = 'id'
sort.order = 'asc'
} else {
sort.order = 'asc'
}
} else {
sort.type = type
sort.order = 'asc'
}
}
// Fetches chunk of indexing data from PlanoCore
function get_data(callback) {
Planocore.http(
'/' + sort.model + '/index/' + sort.type +
'/' + infinity.set + '/' + sort.order +
'/' + sort.search).then(callback);
}
// Resets the inifiny scroll
function reset_infinity_scroll(callback) {
infinity.results_count = sort.count;
infinity.no_more_fetch_data = false;
infinity.ready_for_next_fetch = true;
$(window).scroll(function () {
if (
($(window).scrollTop() >= $(document).height() - $(window).height() - 400)
&& infinity.ready_for_next_fetch && !infinity.no_more_fetch_data
&& (infinity.results_count >= $('[data-user-id]').length)
) {
// $('.spinner-footer').show();
fetch_set(callback);
}
})
}
// Fetches next chuck of data from PlanoCore
function fetch_set(callback) {
console.log('fetch');
infinity.set += 1;
infinity.ready_for_next_fetch = false
get_data(function(res) {
callback(res);
infinity.ready_for_next_fetch = true;
})
}
}]);
HTML
<div class="container">
<div class="col-md-8 col-xs-12">
<div class="pull-left">
<h1>Users</h1>
</div>
<!-- Search -->
<div class="pull-right">
<a class="btn btn-success margin-top-20 pull-right" data-target=".new_user_tab" data-toggle="tab">New +</a>
<form class="default margin-top-20 pull-right margin-right-10" role="search" ng-submit="search_by(searchText)">
<div class="input-group width-260">
<span class="input-group-addon">
<i type="text" class="fa fa-search"></i>
</span>
<input type="text" class="form-control" placeholder="Search Users" ng-model="searchText" autofocus>
</div>
</form>
</div>
</div>
<!-- New/Edit Form -->
<div class="col-md-4 hidden-sm hidden-xs">
<div class="fixed">
<div class="tab-content">
<div class="tab-pane new_user_tab active">
<div ng-include="'/assets/views/users/new.html'"></div>
</div>
<div class="tab-pane edit_user_tab">
<div ng-include="'/assets/views/users/edit.html'"></div>
</div>
</div>
</div>
</div>
<!-- User Index -->
<div class="col-md-8 col-xs-12">
<!-- New/Edit Small Form -->
<div class="tab-content visible-sm visible-xs">
<div class="tab-pane new_user_tab active">
<div ng-include="'/assets/views/users/new_sm.html'"></div>
</div>
<div class="tab-pane edit_user_tab">
<div ng-include="'/assets/views/users/edit_sm.html'"></div>
</div>
</div>
<table class="table table-hover table-condensed">
<thead>
<tr>
<th class="width-40">ID</th>
<th class="width-180">Name <i class="fa fa-sort" ng-click="sort_by('first_name')"></i></th>
<th>Email <i class="fa fa-sort" ng-click="sort_by('email')"></i></th>
<th class="width-40"></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in users" data-user-id={{user.id}}>
<td>{{user.id}}</td>
<td><a ng-click="edit(user)" data-target=".edit_user_tab" data-toggle="tab">{{user.first_name}} {{user.last_name}}</a></td>
<td>{{user.email}}
</td>
<td>
<b class="text-danger" ng-click="confirm_remove_user(user)" data-toggle="modal" data-target="#userRemoveModal">X</b>
</td>
</tr>
</tbody>
</table>
<div id="pagination-bottom" class="center"></div>
<br><br><br>
<br><br><br>
</div>
</div>
