使用 Angular 的 List.Splice() 删除元素后，JQueryUI Datepicker 指令出现故障

Question

当我在 ng-repeat 语句中使用 Angular list.splice($index,1) 删除元素时，JQueryUI Datepicker 出现故障。

删除后（使用如下所示的 del($index) 函数），日历显示但它开始为下一个输入选择日期，下一个输入为下一个...

Angular 控制器：

myApp.controller("CheckList", ["$scope", function ($scope) {
        $scope.items = [];

        ... // add/load function

        $scope.del = function (index) {
            $scope.items.splice(index, 1);

        };

}]);

Angular 日期选择器指令：

myApp.directive('datepicker', function ($timeout) {
       var linker = function (scope, element, attrs) {

            $timeout(function () {
                element.datepicker({
                    dateFormat: 'dd/mm/yy',
                    changeYear: true

                });
            });
        }

        return {
            restrict: 'A',
            link: linker,
            transclude: true
        }
});

HTML

  <div ng-controller="CheckList" id="divListItems" ng-cloak>
       <div ng-repeat="item in items" >
            <input type="text" datepicker id="CheckList-_{{$index}}_-ValidadeFinal"
                name="CheckList[{{$index}}].ValidadeFinal" ng-model="item.valfinal" />
      </div>
      <button type="button" ng-click="del($index)">Del</button>
 </div>

Answer 1

这是由使用 $index 在 HTML 上定义的 ID 引起的。当一个元素被删除时，angular 重命名并重置字段的 ID（由于绑定到 $index）并导致指令绑定故障。

解法：

从 HTML 输入中删除 ID 定义并从指令中删除 "transclude=true"。

HTML

   <div ng-controller="CheckList" id="divListItems" ng-cloak>
       <div ng-repeat="item in items" >
            <input type="text" datepicker name="CheckList[{{$index}}].ValidadeFinal"
                 ng-model="item.valfinal" />
      </div>
      <button type="button" ng-click="del($index)">Del</button>
   </div>

JQuery 日期选择器指令

myApp.directive('datepicker', function ($timeout) {
   var linker = function (scope, element, attrs) {

        $timeout(function () {
            element.datepicker({
                dateFormat: 'dd/mm/yy',
                changeYear: true

            });
        });
    }

    return {
        restrict: 'A',
        link: linker
    }
});

使用 Angular 的 List.Splice() 删除元素后，JQueryUI Datepicker 指令出现故障

JQueryUI Datepicker directive malfunction after removing element using Angular's List.Splice()

jquery

jquery-ui

angularjs

angularjs-directive