Note that there are some explanatory texts on larger screens.

plurals
  1. POGetting a Filter to handle a Promised Service
    primarykey
    data
    text
    <p>I have already started to rework this code to operate synchronously, but out of curiosity and a desire to support both means, I need some help understanding how to get a filter to jive with a promise. As some other posts mention a filter seems to just resolve to {} from a promise.</p> <h2>Basic Pattern</h2> <p>Here's a breakdown:</p> <ol> <li><p>Define a service in the module that returns a promise instead of an object</p> <pre><code>module.factory('promisedSvc', ['$http', function($http) { var httpPromise = null, servicePromise = null, service = {}, dataSet = {}; var httpPromise = $http.get('somedata.json').success(function(data) { dataSet = data; }); servicePromise = httpPromise.then(function(){ service.getData = function(key) { return dataSet[key]; }; service.addData = function(key, value) { dataSet[key] = value; }; return service; }); /* In actuality I proxied the service methods onto the promise because I didn't want consumers of the service to have to deal with it being a promise. There is the caveat of setting properties on a class I don't own (property collisions), a risk I'm okay taking, but YMMV Commented out proxies servicePromise.getData = function(key) { return this.then(function(svc){ return svc.getData(key); }); }; servicePromise.addData = function(key, value) { this.then(function(svc){ svc.addData(key, value); }); }; */ return servicePromise; }]); </code></pre></li> <li><p>Controllers can handle this <code>promisedSvc</code> fine, you just get the promise injected into the controller and then use the <code>then</code> function on the promise to wrap the setting of a <code>$scope</code> property to the function call on the eventual service object: <code>getData(key)</code> or <code>setData(key, value)</code>. Alternately you can just treat it as normal if you proxied the functions onto the promise like in the commented out block.</p></li> <li><p>Filters do not seem to inherently handle promises like <code>$scope</code> does. I am looking for a way to get the filter to inject the <code>promisedSvc</code> and be able to call <code>getData(key)</code> without it resolving to <code>{}</code> because the promise has not resolved yet. Below is an example of what does not work:</p> <pre><code>module.filter('svcData', ['promisedSvc', function(promisedSvc) { return function(input) { return promisedSvc.then(function(svc) { var value = svc.getData(input); return value; }); }; }]); </code></pre></li> </ol> <p>So is there a way to write the filter to be able to resolve the value?</p> <h2>Use Case</h2> <p>That is the simplified pattern of what I am trying to achieve. For those curious, my actual use case is to pre-fetch i18n/l10n resource bundle information so I can localize all the text in my application. The pre-fetch could all be in the Javascript environment (attached to some already loaded global or in a provider), but we also have scenarios with database-stored Resource Bundles so I needed a version of code that can pre-fetch all the information from the server via AJAX.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload