javascript - AngularJS 服务变量引用

Question

我已经为此绞尽脑汁好几天了，请原谅我缺乏 JavaScript 专业知识，因为这可能是问题所在。

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

我遇到的问题是服务正确地在对象队列中移动，将当前项设置为当前索引处的数组项。但是，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
};

在服务中可以看到将当前项目变量设置为数组中的某个位置，但从不会在 Controller 中看到。但是，如果我执行 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;

这是你的 fiddle :http://jsfiddle.net/pjMrh/3/