In my current project, there is a property in the scope that contains an ID for an external object. Additionally, I have implemented a filter that takes this ID and expands it into a complete object using the following code:
{{ typeId | expandType }}
Filter Code:
.filter('expandType', ['TypeService', function (tsvc) {
return function (id) {
return tsvc.types.get({ id: id });
}
}])
The above code snippet uses the 'expandType' filter which references the TypeService service. The TypeService service makes use of the $resource method to retrieve data from the server with caching enabled:
.factory('TypeService', ['$resource', function ($resource) {
var typeResource = $resource('/api/types/:id', { id: '@id' }, {
get: { method: 'GET', cache: true, params: { id: '@id' } }
});
return {
types: typeResource
}
}])
Although I expected the cached resource to return the same object consistently to prevent any changes triggering additional digest cycles in AngularJS, I encountered an "infdig" error indicating an infinite loop during subsequent digests.
I verified that the caching mechanism is functional as there is only one request sent to the server when executing the get() method. Despite this, the issue persists.
How can I resolve this problem and successfully utilize the filter to expand IDs into complete objects?