Question

我有一个页面显示数据库中的所有人员，我们称之为所有人页面。在该页面上，我有两个选项：

添加新人
删除人（无论我想要什么人）

当我导航到另一个页面然后返回到所有人页面时，会出现问题。

如果我删除了一个人，之后添加一个新人，视图将显示添加的新人，但也显示已删除的人。

在控制器中，我将数据库中的数据添加到数组中。

<div class="thumbnailImageStrip">
            <ul class="models">
                <li *ngFor="let model of models" (click)="onImageClick(model.imageUrl)">
                    <input type="image" [src]="model.imageUrl" />
                </li>
            </ul>
            <!--<div class="overlay">
                <div class="text">Hello World</div>
            </div>-->
        </div>

并通过ng-repeat显示在视图中。

$scope.persons_array = []

添加人我在数组中插入新ID：

<div ng-repeat="(key, value) in persons_array)">

删除一个人我从数组中删除了spcified ID：

$scope.persons_array.push($scope.id[i])

的试验：

要发现问题所在，我创建了一个setInterval函数：

$scope.persons_array.splice(i,1);

当我进入All Persons Page时，我已经添加了一个Person，我可以看到：

    setInterval(function(){
        console.log($scope.persons_array)
    }, 5000)

当我导航到另一个页面然后回来时：

[Object { id=667,  $$hashKey="object:71"}]

添加新人：

[Object { id=667,  $$hashKey="object:71"}] //original
[Object { id=667,  $$hashKey="object:220"}] //new

检测刚添加的人：

[Object { id=667,  $$hashKey="object:71"}] //original
[Object { id=667,  $$hashKey="object:220"}, Object { id=668,  $$hashKey="object:227"}] //new

删除数据库中已有的人员：

[Object { id=667,  $$hashKey="object:71"}] //original
[Object { id=667,  $$hashKey="object:220"}, Object { id=668,  $$hashKey="object:227"}] //new

再次添加新人：

[] //original
[Object { id=667,  $$hashKey="object:220"}, Object { id=668,  $$hashKey="object:227"}] //new

从我所看到的，在我导航到另一个页面的那一刻，Angular以某种方式复制了$ scope.persons_array，之后不再更新原始数组。

Answer 1

控制器不会在路由更改时自动释放，因此您在其中创建的setInterval会使用控制器当时具有的特定实例所拥有的任何数据，即使在您离开使用它的路径之后也会继续快乐地转移

当控制器不再连接到活动元素时，Angular会发送$destroy事件;在控制器中监视该事件并取消绑定任何正在进行的功能（例如您的setInterval）。

$scope.intervalID = setInterval(function(){
    console.log($scope.persons_array)
}, 5000);

$scope.on('$destroy', function() {
    clearInterval($scope.intervalID); 
    // and remove any other data that you don't need persisting
});

如果在控制器范围内存储大量内容，这会非常麻烦。我个人倾向于仅将控制器用作幂等函数的容器，而是将数据存储在指令（如果它是特定于实例的）或服务中（如果需要在应用程序中共享） - 这解决了上述问题，还有助于避免使用相同控制器的指令之间的范围泄漏。

当导航到另一个页面时，Angular会复制$ scope

的试验：

1 个答案: