AngularJS:关于实例化服务

AngularJS: about instantiating the service

本文关键字：实例化 服务 AngularJS      更新时间：2023-09-26

我有一个控制器：

.controller('myCtrl', function (myService) {
    var that = this;
    that.myService = myService;
});

一项服务： 

.service('myService', function (DataFactory) {
    var listData = [];
    var mockList = ['aaa','bbb','ccc']; 
    var handleData = function (data) {
        listData = data;
    };

和 html：

<button ng-click="myCtrl.myService.handleData()">Go</button>
<div ng-repeat="item in myCtrl.myService.listData>
    {{ item }}
</div>

问题是：我有一个列表，其中包含来自myService.listData的数据，并且（使用上面的所有代码）它按预期工作 - 通过在单击按钮时更新列表。

我补充了： 

that.list = myService.listData

并更改了 

item in myCtrl.myService.listData to item in myCtrl.list

整个事情停止工作。

你能给我解释一下吗？我觉得我错过了一些非常基本的东西，我需要方向开始搜索更多信息。

扑通：工作一破碎

这是一个工作 plunker。

您的误解是您希望在单击时填充基础列表时that.myService更新handleData()。

但是，请查看您的handleData()实现：

listData = data;

您不会改变初始列表，而是指向另一个列表（因此引用了一个不同的列表），因为它充当了完整的重新分配！

因此，解决问题的一种方法是改变初始列表： 

var handleData = function (data) {
    // populating elements into the initial list
    Array.prototype.push.apply(listData, mockedList); 
};
相关文章：