使用$ 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消失

回答

相关问题