Очистить общедоступную переменную в Angular Service

Question

Я довольно новичок в Angular и столкнулся с проблемой, переполнение google и stack не принесло ничего полезного, я полагаю, что в основном из-за того, что я даже не знаю, что искать для. Итак, вот моя проблема в надежде, что вы поможете мне решить. У меня есть следующий код: 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 = []; Пожалуйста, помогите мне понять, что я сделал неправильно.

Answer 1

Вам необходимо сбросить существующий массив вместо того, чтобы переписывать ссылку на массив с новой. Вы можете сделать это, например, так:

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

Угловыми используют строгое сравнение объектов в Бодрствующих переваривать цикл, поэтому при сбросе списка с self.list = [] вы полностью перезаписать ссылку на объект, так Угловой не знают, что вы обновили предыдущий его используемый для рендеринга в списке. С другой стороны, this.list.length = 0 - это быстрый способ очистки массива, а не переписать с новым, но на самом деле clear it.

Демо:https://jsfiddle.net/fz2zgozx/2/