使用$ watch，表格div消失

我正在使用isteven-multi-select指令進行多選下拉菜單。我給它thingsList，它創建checkedList，而我選擇的東西。

所以起初我用按鈕確認選擇，ng-click觸發postFunction與checkedList。它工作得很好。

但後來我決定添加一個觀察者，所以我不需要按下按鈕。正如我在調試模式下看到的那樣（列表更新正確），但存在問題。我正在使用datatables在頁面上顯示更新列表。但不知何故，選擇任何東西在下拉（$觀看事件）<div> with table消失。它不是展示或者它從DOM本身消失的東西。

我不知道爲什麼。

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); 
      } 
     });

指令：

<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自敗：

 ... 
     <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> 
     ...

來源

2016-07-11 ottercoder

我們不知道手錶內部使用的功能是什麼。提供所有相關的代碼。一個plunker演示將非常有幫助。參見[mcve] – charlietfl

@charlietfl，基本上'bindNew'和'bindBack'都與'postThings'相同。它發送post請求並取回數據。 – ottercoder

沒有演示再現問題的演示不能確定任何人都可以幫助 – charlietfl

發現問題。在angular-datatables中有已知的錯誤，其中多個重新排列會以某種方式從DOM中刪除<表>。 https://github.com/l-lin/angular-datatables/issues/729

所以這個想法是停止不斷的重新渲染，而不是觸發bug。

對我來說，增加檢查是否newValue有不同的長度然後oldValue。現在沒有不斷的迴歸，它運作良好。

$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); 
     } 
    } 
    });

來源

2016-07-13 08:58:17 ottercoder

使用$ watch，表格div消失

回答

相關問題