Question

我在控制器中有这个

$scope.activities = Activities.getAll();

$httpService.getActivities().then(function (response) {
    var activities = response.data.body;
    Activities.addMany(activities);
});

现在我的服务看起来像这样：

var _activities = [];

function addMany(activities) {
    if (activities instanceof Array) {
        _activities = _activities.concat(activities);
    }
}

和

function getAll() {
    return _activities;
}

getActivities结算后视图不会更新。我检查过，响应确实包含新活动，并将它们添加到服务中的_activities数组中。

可能是什么问题，如何确保范围始终根据服务值而变化？

提前致谢。

Answer 1

根据文档（https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/concat），Javascript Array.concat方法会创建一个新数组。

这意味着在getMany调用之后从getAll函数返回的_activities数组和生成的_activities数组不是同一个数组。

您需要做的是向现有阵列添加元素而不创建新元素。而不是：

_activities = _activities.concat(activities);

你应该这样做

for (var i=0; i < activities.length; i++) {
    _activities.push(activities[i]);
}

Answer 2

您的问题似乎就是如何从服务中引用_activities变量。当你打电话：

$scope.activities = Activities.getAll();

您正在设置要附加到范围的初始空白数组。调用addMany()函数后，服务中的数组已替换，未更新。所以你的控制器仍然指向原始的空数组。

要解决此问题，请将对象包装在可在范围上设置的容器中。例如：

var data = {
    activities: []
};

function addMany(activities) {
    if (activities instanceof Array) {
        data._activities = _activities.concat(activities);
    }
}

function getData() { return data; }

然后在你的控制器中执行以下操作：

$scope.activitySrv = Activities.getData();

要引用视图中的活动，您需要使用activitySrv.activities。

之所以选择这种方法而不是简单地推送到数组（而不是替换），是因为这样可以让您的服务随着时间的推移而扩展。您只需要服务中的单个函数来检索范围使用的数据，并且只需在需要时添加到父对象即可。它还将所有服务特定数据的服务分组到一个范围变量中，因此在您的视图中更容易看到数据的来源。

Answer 3

您的视图应与相关控制器的范围变量相关联。因此，您可能应该在视图中使用$scope.activities。当新数据出现时，您应该更新此范围变量。在控制器中尝试这样的事情：

$httpService.getActivities().then(function (response) {
    $scope.activities = response.data.body;
    Activities.addMany($scope.activities);
});

AngularJS从服务模型更新范围

3 个答案: