Verwenden von $ watch, Tabelle div dissapear

Question

Ich verwende isteven-multi-select Direktive für Multi-Select Dropdown. Ich gebe es thingsList und es erstellt checkedList, während ich Sachen wähle.

So zunächst verwendet I-Taste zur Bestätigung der Auswahl und ng-click ausgelöst postFunction mit checkedList. Und es hat gut funktioniert.

Aber dann entschied ich mich, einen Beobachter hinzuzufügen, so dass ich nicht auf den Knopf drücken müsste. Wie ich im Debug-Modus sehen kann, funktioniert es (Liste ist Updates korrekt), aber es gibt ein Problem. Ich zeige eine aktualisierte Liste auf der Seite mit datatables. Aber irgendwie, nach der Auswahl irgendetwas bei Drop-Down ($ Watch-Event) <div> with table verschwindet. Und es ist nicht ng-show oder etwas, das es von DOM selbst verschwindet.

Ich habe keine Ahnung warum.

this.postThings = function (checkedList) { 
     $http.post("/list/" JSON.stringify(checkedList)).then(
      function success(response) { 
       $scope.thingsList.splice(0); 
       Array.prototype.push.apply($scope.thingsList, response.data); 
      }, 
      function error(data) { 
       console.log(data); 
       $.notify({message: data.data.message}, {type: 'danger'}); 
      } 
     ); 
    }; 


$scope.$watch(function (scope) { 
      return scope.checkedList 
     }, 
     function (newValue, oldValue) { 
      if ($scope.checkedList.length == 0) { 
       vm.bindBack(); 
      } else { 
       vm.bindNew($scope.checkedList); 
      } 
     }); 

Richtlinie:

<isteven-multi-select input-model="thingsList" 
          output-model="checkedList" 
          button button-label="icon name" 
          item-label="icon name maker" 
          tick-property="check"> 
</isteven-multi-select> 

HTML-Code, verschwindet:

 ... 
     <div class="table-responsive"> 
      <h3>Things:/h3> 
      <table datatable="ng" class="display"> 
       <thead> 
       <tr> 
        <th>ID</th> 
        <th>Name</th> 
       </tr> 
       </thead> 
       <tbody> 
       <tr ng-repeat="thing in thingsList"> 
        <td>{{thing .id}}</td> 
        <td><a ui-sref="thing Info({thing Id: thing .id})">{{thing .name}}</a></td> 
       </tr> 
       </tbody> 
      </table> 
     </div> 
     ... 

Answer 1

das Problem gefunden. Es gibt einen bekannten Fehler in angular-datatables, wo mehrere rerenderings irgendwie < Tabelle> vom DOM löschen. https://github.com/l-lin/angular-datatables/issues/729

Die Idee ist also konstant rerendering zu stoppen, nicht den Fehler auslösen.

Für mich war die Lösung, zu prüfen, ob newValue eine andere Länge als oldValue hat. Jetzt gibt es keinen konstanten Neuerer und es funktioniert gut.

$scope.$watch(function (scope) { 
     return scope.checkedList 
    }, 
    function (newValue, oldValue) { 
    if(newValue.length != oldValue.length) { 
     if ($scope.checkedList.length == 0) { 
      vm.bindBack(); 
     } else { 
      vm.bindNew($scope.checkedList); 
     } 
    } 
    });