Question

无法让代码生效。检查codepen。

指令wrapper将根据提供的限制（task，min）创建一堆max指令。信息（绑定）使用wrapper中数组task的元素从arr传递到wrapper指令。同样在删除按钮时，将移除其scope以及关联的HTML元素，并删除wrapper中与其关联的数组元素。

尝试删除按钮（4,3,2,1,0）中的按钮，但是尝试删除按钮3然后按4，删除按钮3可以正常工作，但是对于4，它会在scope.twb.remove = true;崩溃在remove指令的task函数中。

崩溃的可能原因是删除按钮3其数组中的相关元素（在索引3处。按钮[0-4]的索引[0-4]）被删除。仍然按钮4指向缺少的第四个索引处的数组元素。

如何解决问题，还是有其他更好的解决方案？

HTML：

<html ng-app="ionicApp">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

  <title>Test</title>

  <link href="http://code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
  <script src="http://code.ionicframework.com/nightly/js/ionic.bundle.js"></script>

</head>

<body ng-controller="AppCtrl as vm">
  <ion-content padding="true">
    <wrapper twb="vm.twb"></wrapper>
  </ion-content>
</body>

</html>

JS

angular.module('ionicApp', ['ionic']).
controller('AppCtrl', ['$scope', function($scope) {
    var vm = this;
    vm.twb = {
      max: 5,
      min: 1,
    };
  }])
  .directive('wrapper', ['$compile', function($compile) {
    return {
      restrict: 'E',
      template: '<div class="wrapper"></div>',
      replace: true,
      /* Creating an isolated scope */
      scope: {
        twb: '=',
      },
      link: function(scope, element, attrs) {
        var base = {
          id: null,
          remove: false,
          /* function exposed by wrapper directive */
          update: update,
          /* function to be exposed by the task directive */
          destroy: null,
        };

        function update() {
          for (var i = 0; i < scope.arr.length; i++) {
            if (scope.arr[i].remove) {
              /* removing the task */
              scope.arr[i].destroy();
              /* removing the task deatils from the arr */
              scope.arr.splice(i, 1);
            }
          }
        }

        scope.arr = Array();
        for (var i = 0; i < scope.twb.max; i++) {
          scope.arr[i] = {};
          scope.arr[i] = angular.copy(base);
          scope.arr[i].id = i;
          var aTask = angular.element('<task>').attr('twb', 'arr[' + i + ']');
          element.append($compile(aTask)(scope));
        }
      }
    }
  }]).directive('task', [function() {
    return {
      restrict: 'E',
      template: '<div class="task"><button ng-click="remove()" class="button button-large"> Remove ({{taskid}}) </button></div>',
      replace: true,
      /* Creating an isolated scope */
      scope: {
        twb: '=',
      },
      link: function(scope, element, attrs) {
        scope.taskid = scope.twb.id;
        scope.remove = function() {
          scope.twb.remove = true;
          scope.twb.update();
        };
        scope.twb.destroy = function() {
          scope.$destroy();
          element.remove();
        }
      }
    }
  }]);

Answer 1

查看您的更新功能。它循环遍历一个数组，并在循环内部删除一个元素。删除（scope.arr.slice（i，1））的效果当然是删除索引i上的元素，但另外索引大于i的所有元素都将获得index = index-1。因此，你的循环错过了一个元素，即i + 1的元素。

要修复它，你可以 - 在拼接指令之后。

Angularjs：在循环

1 个答案: