私は AngularJS にスマート テーブル ( http://lorenzofox3.github.io/smart-table-website/ ) を使用しており、テーブルのリロードをトリガーする isReset というフラグを作成しました。これは、フラグを監視するディレクティブがあり、isReset が設定されているときに更新を実行し、更新が完了した後にフラグを再びオフに設定するために発生します。
私の問題は、フラグを設定すると初めて実行されることですが、フラグの動作を監視した後、false に戻らないようです。フラグを手動で false に設定しようとしましたが、次回は $watch もトリガーされませんでした。私のコードは次のとおりです。問題を明らかにするのを手伝っていただければ幸いです。最も奇妙なことは、まったく同じ方法で使用している別の場所があり、意図したとおりに機能することです。
JS
$scope.resetFilter = function() {
$scope.timestampFilter = "";
$scope.levelFilter = "";
};
$scope.getAPIServerLogs = function (tableState) {
$scope.isLoading = true;
ServerLog.get({
"serverType": "API",
"timestampFilter": $scope.timestampFilter,
"levelFilter": $scope.levelFilter,
"offset": tableState.pagination.start,
"limit": tableState.pagination.number,
"sortField": tableState.sort.predicate,
"order": tableState.sort.reverse ? "desc" : "asc"
}, function (response) {
$scope.isLoading = false;
$scope.serverlogs = response.data;
$scope.displayedserverlog = [].concat($scope.serverlogs);
tableState.pagination.numberOfPages = response.pages;
});
};
指令
directives.directive('stReset', function () {
return {
require: '^stTable',
replace: false,
scope: {stReset: "=stReset"},
link: function (scope, element, attr, ctrl) {
scope.$watch("stReset", function () {
if (scope.stReset) {
// reset scope value
var tableState = ctrl.tableState();
tableState.pagination.start = 0;
tableState.sort.prediate = {};
tableState.search = {};
ctrl.pipe();
scope.stReset = false;
}
}, true);
}
};
HTML
<table st-table="displayedserverlog" st-safe-src="serverlogs" st-pipe="getAPIServerLogs"
class="table table-striped table-hover logtable">
<thead st-reset="isReset">
<tr>
<th st-sort-default="reverse" st-sort="timestamp" width="11%">Timestamp</th>
<th st-sort="logger" width="30%">logger</th>
<th st-sort="level" width="3%">Level</th>
<th st-sort="thread" width="11%">Thread</th>
<th st-sort="message" width="45%">Message</th>
</tr>
</thead>
<tbody ng-repeat="serverlog in serverlogs">
<tr ng-click="click(serverlog)" ng-class="{'tr-active':serverlog.isClicked, 'pointer danger':serverlog.exception}">
<td>{{serverlog.timestamp | date: 'yyyy-MMM-dd hh:mm:ss'}}</td>
<td>{{serverlog.logger}}</td>
<td>{{serverlog.level}}</td>
<td>{{serverlog.thread}}</td>
<td>{{serverlog.message}}</td>
</tr>
<tr ng-show="serverlog.isClicked">
<td colspan="6">
<div class="row">
<div class="col-md-12">
<div>{{serverlog.exception}}</div>
<pre><div ng-repeat="trace in serverlog.stacktrace track by $index" class="stacktrace">{{trace}}
</div></pre>
</div>
</div>
</td>
</tr>
</tbody>
<tfoot ng-hide="isLoading">
<tr>
<td colspan="10" class="text-center">
<div st-pagination="" st-items-by-page="50"></div>
</td>
</tr>
</tfoot>