状況は次のとおりです。 - ng-model='user_name' でユーザー名を入力する入力フィールド。- ng-click="queryUserLogs(user_name, $event) のボタン - ユーザー名を入力してボタンをクリックすると、コントローラーで定義されている次のメソッドが呼び出されます。
// un: username
$scope.queryUserLogs = function(un, $event){
if(typeof $scope.user_name !== 'undefined'){
var transaction_id = gen_uuid();
$scope.$watch("user_name", function (newVal, oldVal) {
if($event.type === "click"){
console.log("Reloading...");
$scope.tableParams.reload();
delete $event.type;
}
});
$scope.tableParams = new ngTableParams({
page: 1, // show first page
count: 10, // count per page
}, {
total: 0,
getData: function($defer, params) {
BI.get({userName: $scope.user_name, page: params.page(), count: params.count()}, function(data) {
// set new data
$scope.basicInfos = data.results;
params.total(data.count);
$scope.showLogs = true;
$defer.resolve(data.results.slice((params.page() - 1) * params.count(), params.page() * params.count()));
});
},
$scope: { $data: {} }
});
} else {
console.log("Username is empty!");
}
}
- 最初のリクエストでは、メソッドが正常に呼び出され、BI $resource を使用してサーバーにアクセスし、データを取得して正しく表示します。すべてがうまく機能します。
ユーザー名を変更してボタンをクリックすると、コンソールに次のエラーが表示されます。
TypeError: undefined is not a function at http://localhost:8000/static/js/ng-table.min.js:414:33 at u (http://localhost:8000/static/js/angular.min.js:97:280) at http://localhost:8000/static/js/angular.min.js:98:417 at h.$eval (http://localhost:8000/static/js/angular.min.js:108:482) at h.$digest (http://localhost:8000/static/js/angular.min.js:106:62) at h.$apply (http://localhost:8000/static/js/angular.min.js:109:287) at f (http://localhost:8000/static/js/angular.min.js:71:247) at F (http://localhost:8000/static/js/angular.min.js:75:408) at XMLHttpRequest.x.onreadystatechange (http://localhost:8000/static/js/angular.min.js:76:457)
新しいデータは実際には正常に取得されますが、最初にクエリされたユーザー名が 4 ページで、2 番目のユーザー名が 1 ページしかない場合、ページ区切りは機能しなくなり、2 番目のクエリでは 4 ページのままになり、逆の場合も同様です。
PS: ngTable がコントローラーの依存関係に追加されます。