Question

我对Angular相当新，并遇到了一个问题，google和堆栈溢出并没有发现任何有用的东西，我相信很大程度上是因为我甚至不知道要搜索什么。所以这就是我的问题，希望你能帮我解决。我有以下代码： JSFiddle

HTML

<button ng-click="reload()">Reload</button>
<button ng-click="loadMore()">Load More</button>
<ul>
    <li ng-repeat="item in list">{{ item }}</li>
</ul>

的JavaScript

var app = angular.module('app', []);

app.controller('mainCtrl', ['$scope', 'mainSvr', function ($scope, mainSvr) {
    $scope.list = mainSvr.list;
    $scope.reload = mainSvr.reload;
    $scope.loadMore = mainSvr.loadMore;
}]);

app.service('mainSvr', function () {
    // private
    var self = this;

    // public
    this.list = [];

    this.reload = function () {
        for (var i = 0; i < 5; i++) {
            self.list.push(i * 10);
        }
    };

    this.loadMore = function () {
        var listLength = self.list.length;
        for (var i = listLength; i < listLength + 5; i++) {
            self.list.push(i * 10);
        }
    }
});

当我点击重新加载时，我想清除并重新填充列表（因此它再次显示0-40），我该怎么办？我试过了：

this.reload = function () {
    self.list = [];
    for (var i = 0; i < 5; i++) {
        self.list.push(i * 10);
    }
};

但它没有奏效，根本没有任何表现。我使用调试器和断点，看到列表实际上被清除并重新填充，当我做self.list = []时，UI不知道怎么回事。请帮助我理解我做错了什么。

Answer 1

您需要重置现有数组，而不是使用新数组覆盖数组引用。你可以这样做：

this.reload = function () {
    self.list.length = 0;
    for (var i = 0; i < 5; i++) {
        self.list.push(i * 10);
    }
};

Angular在观察者摘要周期中使用严格的对象比较，因此当您使用self.list = []重置列表时，您会完全覆盖对象引用，因此Angular不知道您在列表中用于渲染之前已更新。另一方面，this.list.length = 0是清除数组的快捷方式，而不是用新的覆盖，但实际上清除。

演示： https://jsfiddle.net/fz2zgozx/2/

在Angular Service中清除公共变量

1 个答案: