Question

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

Answer 1

您可以在第一次调用服务后返回承诺。因此，这两个指令都可能调用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;
}

Answer 2

在任何情况下，这应始终由服务处理，使用哪一个以及如何处理它，取决于您的应用程序， 2种使用服务的方式是

1- (my favorite) use your service to get the data from the server and use $cacheFactory to cache the response and serve it to the rest of the directives

https://docs.angularjs.org/api/ng/type/ $ cacheFactory.Cache。我更喜欢这个，因为它从维护数据中抽象出你的指令和服务。

2- keep the data in a service local variable and check for existence before making the http call to the server. This solution is not bad but then you'll jave to implement a data cache handler to manage how long should your data live in the service.

其他解决方案我最不喜欢的是实现类似于＃2的东西，但是使用$ rootScope代替并注入你想要访问数据的任何地方。这不是我的建议，但也可以使用

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

2 个答案: