使用$watch表

Question

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

因此，一开始我使用按钮来确认选择，ng-click用checkedList触发postFunction。而且效果很好。

但是我决定增加一个观察者，这样我就不需要按下按钮了。正如我所看到的，在调试模式下，它正在工作(list是正确的更新)，但是有一个问题。我正在用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中存在已知的错误，其中多个重命名以某种方式从DOM中擦除< table >。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);
        }
     }
    });