Question

我已经为此烦恼了好几天，并原谅我缺乏JavaScript专业知识，因为这可能是问题所在。

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

我遇到的问题是服务正在通过对象队列正确移动，将当前项设置为当前索引处的数组项。但是，Controller永远不会看到当前项目的更改。

以下是解释的基本示例。一个工作示例位于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而不是直接引用数组，它就可以工作。有谁知道可能会发生什么？

Answer 1

这是因为服务对象永远不会从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/

Answer 2

你有一个变量范围问题，以便在函数执行范围结束后释放变量currentItem。将currentItem分配给this会解决问题。

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

的 DEMO

AngularJS服务变量参考

2 个答案: