Javascript 清除角度服务中的公共变量

我是Angular的新手，遇到了一个问题，google和stack overflow没有发现任何有用的东西，我相信这主要是因为我甚至不知道搜索什么。这是我的问题，希望你能帮我解决。我有以下代码：

HTML

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

重新加载
加载更多

{{item}

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);
        }
    }
});

var-app=angular.module（'app'，[]）；
app.controller（'mainCtrl'，['$scope'，'mainSvr'，函数（$scope，mainSvr）{
$scope.list=mainSvr.list；
$scope.reload=mainSvr.reload；
$scope.loadMore=mainSvr.loadMore；
}]);
应用程序服务（'mainSvr'，功能（）{
//私人的
var self=这个；
//公开的
this.list=[]；
this.reload=函数（）{
对于（变量i=0；i<5；i++）{
self.list.push（i*10）；
}
};
this.loadMore=函数（）{
var listLength=self.list.length；
对于（var i=listLength；i

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

this.reload=函数（）{
self.list=[]；
对于（变量i=0；i<5；i++）{
self.list.push（i*10）；
}
};

但它不起作用，什么也没出现。我使用debugger和break point，看到列表实际上被清除并重新填充，但当我执行self.list=[]时，不知何故UI并没有拾取它；请帮助我理解我做错了什么。

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

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

this.reload=函数（）{
self.list.length=0；
对于（变量i=0；i<5；i++）{
self.list.push（i*10）；
}
};

Angular在watchers digest cycle中使用严格的对象比较，因此当您使用

self.list=[]

重置列表时，您将完全覆盖对象引用，因此Angular不知道您更新了以前用于在列表中渲染的对象引用。另一方面，

this.list.length=0

是清除数组的快速方法，不是用新数组覆盖，而是实际清除它

演示：

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