使用 $watch，table div 消失

Question

我正在为多 select 下拉菜单使用 isteven-multi-select 指令。我给它 thingsList，当我选择东西时它会创建 checkedList。

所以一开始我用按钮确认select离子和ng-click用checkedList触发postFunction。而且效果很好。

但后来我决定添加一个观察者，这样我就不需要按按钮了。正如我在调试模式下看到的那样，它正在工作（列表是正确更新的），但是有一个问题。我在带有 datatables 的页面上显示更新的列表。但不知何故，在下拉列表中选择任何内容（$watch event）后 <div> with table 消失了。而且它不是 ng-show 或它从 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>
        ...

Answer 1

找到问题了。 angular-datatables 中存在已知错误，其中多次重新渲染以某种方式从 DOM 中删除 < table >。 https://github.com/l-lin/angular-datatables/issues/729

So the idea is to stop constant rerendering, not trigger the 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);
        }
     }
    });

使用 $watch，table div 消失

Using $watch, table div dissapear

html

javascript

jquery

angularjs

angular-datatables