Question

我修改了服务中的数组，同时绑定了指令中的服务属性。现在我想从数组中删除一个项目，但我无法让Array.filter工作。我不确定是不是因为Array.filter 异步，或者因为它返回新数组而不是修改原始数据或 $ digest 循环。一个常见的for循环确实有效，但是因为我读到了更多声明性数组方法的优点，我想我会问你为什么它不起作用。

指令

(function () {
  "use strict";

  function MyDirective(MyService) {
    return {
      restrict: "E",
      templateUrl: "template.html",
      scope: {
        limit: "="
      },
      link: function (scope, element, attrs) {
        scope.array= MyService.array;

        scope.removeItem = function (index) {
          MyService.removeItem(index);
        };
      }
    };
  }

  angular
    .module("Module", [])
    .directive("myDirective", ['MyService', MyDirective]);

}());

使用Array.filter服务

(function () {
  "use strict";

  function MyService() {
    var array = [];

    function removeItem(idx) {
      array = array.filter(function(item) {
        return item.index !== idx;
      });
    }

    return {
      array: array,
      removeItem: removeItem
    };
  }

  angular
    .module("Module")
    .factory("MyService", [MyService]);

}());

使用for循环进行服务

(function () {
  "use strict";

  function MyService() {
    var array = [];

    function removeItem(idx) {
      for(var i = 0; i < array.length; i++) {
        if(array[i].index === idx) {
          array.splice(i, 1);
          break;
        }
      }
    }

    return {
      array: array,
      removeItem: removeItem
    };
  }

  angular
    .module("Module")
    .factory("MyService", [MyService]);

}());

感谢

编辑：为了澄清我的意思＆＃34;它没有工作＆＃34;，用户界面没有更新，当我输出长度时在Array.filter之前和之后的数组，它仍然是相同的大小。我还在下次删除项目时进行了检查，它仍然与开头相同。

Answer 1

重新分配变量时，对变量的引用不会自动更新以引用新变量。

Answer 2

当您注入服务时，它会返回您从服务函数返回的对象，该对象具有两个属性：空array数组和名为removeItem的函数。当您调用removeItem时，它会在函数范围中设置array var的值，但不会更改返回对象的值。试试这个：

function MyService() {
  var obj = {
    array: [],
    removeItem: function removeItem(idx) {
      obj.array = obj.array.filter(function(item) {
        return item.index !== idx;
      });    
    }
  };

  return obj;
}

Angular-Service Array.filter vs基本for循环

2 个答案: