javascript - 同一页面上多次自定义指令需要相同的数据

Question

我有一个自定义指令，该指令将使用 2 个不同的数据集位于 2 个不同位置的同一页面上，但所有数据都会通过一次服务调用返回。如何进行一次 API 调用并在指令的两个实例中使用数据？

Answer 1

您可以在第一次调用服务后返回一个 promise 。因此，这两个指令都可能调用 service.getData().then(directiveCallback)，但服务仅从服务器获取一次数据。在服务中，类似:

var serverRequestPending = false;
var dataAlreadyRetrieved = false;
var dataPromise;

this.getData = function() {
   return getDataFromServer();
}

function getDataFromServer() {
    // don't do re-work
    if (dataAlreadyRetrieved || serverRequestPending) {
        return dataPromise;
    }


    serverRequestPending = true;

    dataPromise = apiCallHere(); // your custom API behavior that should return a promise and will resolve with the data
    dataPromise.then(onDataGetComplete);

    return dataPromise;
}

function onDataGetComplete() {
    dataAlreadyRetrieved = true;
    serverRequestPending = false;
}