[英]$watch only triggering once
我正在為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>
這個plunker模擬你的問題: http ://plnkr.co/edit/c8crhe9ZR44GQBJ2sqm6?p = preview(看看控制台)
scope.$watch("flag", function(neww, old){
count ++;
console.log("inWatch " + count + ": " + neww + ', ' + old);
if (scope.flag === true) {
scope.flag = false;
}
});
在$ watch中將標志設置為false基本上意味着它將始終為false(因為:您修改了值 - > $ watch runs - >在函數結束時將值設置為false - > value為false)
我發現了一個解決方案。 仍然不確定為什么它有效,但我補充道
scope.$parent.$parent.isReset = false;
在指令的最后,它按照預期的方式工作。 但是,取代現有的
scope.stReset = false;
打破了我使用該指令的另一個地方。 現在,我會做兩件事。 將來,當我在AngularJS更聰明時,我將重新審視這個問題。 我希望這對未來的某個人有所幫助,所以他們不要浪費3天時間像我一樣想出來。
嘗試這個。
var watcher = $scope.$watch('someScope', function(newValue, oldValue){
if(newValue === 'yourValue') {
watcher(); // stop this watch
}
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.