2015-06-21 4 views
5

Я использую смарт-таблицу (http://lorenzofox3.github.io/smart-table-website/) для AngularJS, и я создал флаг 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> 

+0

Что такое код 'ServerLog.get'? это jQuery ajax? ** ИЛИ ** У вас есть только консольные ошибки? –

+0

$ watch func. принимает два аргумента: newVal и oldVal. https://docs.angularjs.org/api/ng/type/$rootScope.Scope. Кроме того, зачем проверять равенство объектов? –

+0

@pankajparkar только консольные ошибки. Ну, даже не ошибки, это просто не ведет себя так, как я ожидаю. – Harry

ответ

0

Это 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; 
      } 
    }); 

Установка флага ложь в $ часы в основном означает, что он всегда будет ложным (потому что вы измените значение -> $ часы бежит -> в конце функции, которую он устанавливает значение ложь -> значение ложно)

+0

Вы правы. Существовала важная строка кода, которую я случайно потерял, это кнопка, которая устанавливает «isReset» в true. Это должно привести к сбросу таблицы, так как она должна быть привязана через «st-reset =» isReset », => запускает $ watch => pipe(), который снова перезагружает таблицу => isReset в значение false. Моя проблема isReset не get set to false по какой-либо причине в этой реализации кода, даже если на другой странице он работает отлично, как и следовало ожидать (и, как вы хорошо выложили в плункер) – Harry

+0

Итак, когда вы говорите, что он работает на другой странице. ..вы используете одну и ту же директиву (st-reset) на обеих страницах (и получаете разные результаты), или у вас есть аналогичная реализация, и там она работает так, как ожидалось? –

+0

Насколько я могу видеть (строки кода, которые взаимодействуют с st-reset), они одинаковы (используйте st-reset для запуска обновления на st-table). Разница в том, что для этого блока $ watch не устанавливает isReset в false и не появляется, чтобы снова запускаться, даже если вручную установить значение false за пределами блока. – Harry

0

Я нашел решение. До сих пор не знаю, почему это работает, но я добавил

scope.$parent.$parent.isReset = false; 

до конца директивы, она работает так, как он предназначен. Однако, заменив существующий

scope.stReset = false;

сломал другое место, я с помощью директивы. Пока я сделаю и то, и другое. В будущем, когда я умнее в AngularJS, я снова рассмотрю эту проблему. Надеюсь, это поможет кому-то в будущем, поэтому они не тратят три дня, пытаясь понять это, как я.

0

попробуйте это.

var watcher = $scope.$watch('someScope', function(newValue, oldValue){ 
    if(newValue === 'yourValue') { 
     watcher(); // stop this watch 
    } 
    }); 
Смежные вопросы