Question

我正在使用isteven-multi-select指令进行多选下拉列表。我给它thingsList并在我选择的时候创建checkedList。

首先，我使用按钮确认选择，ng-click使用postFunction触发checkedList。它运作良好。

但后来我决定添加一个观察者，所以我不需要按下按钮。正如我在调试模式下看到的那样它正在工作（列表正确更新），但是存在问题。我在datatables的页面上显示更新列表。但不知何故，在下拉菜单中选择任何内容后（$ watch event）<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>
        ...

Answer 1

发现问题。 angular-datatables中存在已知的错误，其中多次重新渲染以某种方式擦除＆lt;表＆gt;来自DOM。 https://github.com/l-lin/angular-datatables/issues/729

所以我的想法是停止不断重新渲染，而不是触发错误。

对我来说，解决方案是，添加检查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 dissapear

1 个答案: