3

这几天我一直在摸不着头脑，请原谅我缺乏 JavaScript 专业知识，因为这可能是问题所在。

我有一个 Angular 应用程序，除其他外，它有一个用户可以使用的项目队列。我有一个服务来管理这个队列（当前项目、移动、完成等）。我创建的控制器从服务器获取当前队列项的详细信息，然后显示它们。

我遇到的问题是服务正确地在对象队列中移动，将当前项目设置为当前索引处的数组项目。但是，控制器永远不会看到当前项目的变化。

这里有一个基本的例子来解释。一个工作示例位于http://jsfiddle.net/Surefire_gf/pjMrh/2/，您需要查看控制台才能查看输出。

// ... service code...
var items = [];
var currentItem;
var currentIndex;
...
var moveNext = function() {
    currentIndex = currentIndex + 1;
    currentItem = items[currentIndex];
};

// ... controller code ...
var skip = function() {
    service.moveNext();
    fetchData(service.currentItem);  //THIS NEVER CHANGES, ALWAYS UNDEFINED
};

在服务中可以看到将当前项变量设置为数组中的某个位置，但在控制器中看不到。但是，如果我执行 angular.extend 而不是直接引用数组，它就可以工作。有谁知道可能会发生什么？

4

2 回答 2

2

这是因为服务对象永远不会从您的moveNext函数中更新。

尝试这个：

// service code...
var service = {
    currentItem: null
};

// .......

service.moveNext = function () {
    currentIndex = currentIndex + 1;
    if (currentIndex >= items.length) {
        currentIndex = 0;
    }
    service.currentItem = items[currentIndex];
//  ^^^^^^^^ this is what was wrong...
};

return service;

这是你的小提琴：http: //jsfiddle.net/pjMrh/3/

于 2013-08-27T17:40:20.860 回答
0

您遇到了变量范围问题，因此变量currentItem在函数执行范围结束后被释放。分配currentItem给this将修复它。

var moveNext = function () {
    ...
    this.currentItem = items[currentIndex];
    ...
};
return {
    currentItem: this.currentItem,
    moveNext: moveNext
};

DEMO

于 2013-08-27T17:56:12.543 回答