I would like to do a request to my backend in a filter and return the result of my request. The problem is the service $http return a promise and it\'s the issue.
Fo
I think you should not use filters that way. Filters are for transforming inputs based on optional params.
The problem here would be that you're immediately returning a promise from the filter function. And that's nothing Angular can deal with as a result from a filter.
My suggestion therefore would be this - fetch the result first, work with the filter based on the result:
var app = angular.module("my.module");
app.controller("MyCtrl", ['$http', '$scope', function(http, scope) {
scope.hello = "foo";
http.get('http://my.service.com').then(function(data) {
scope.filterParams = data;
}, function(err) {
scope.filterParams = undefined;
});
}]);
app.filter("filterHello", function() {
return function(input, params) {
if(typeof params === "undefined") {
return "";
}
//work with the params here
};
});
and in the Template:
{{hello|filterHello:filterParams}}
Edit: Just read your explanation. To me, this would be a candidate for a directive:
app.directive("companyName", ['$http', function(http) {
return {
template: "{{name}}",
scope: {
companyId: "="
},
link: function(scope) {
http.get("http://my.service.com/companies/" + scope.id).then(function(result) {
scope.name = result.name;
}, function(err) {
scope.name = "unknown";
});
}
}
}]);
and in the template:
If you have a lot of companies, you should preload the names (maybe send them with the first response initially?), as you'd be bombarding your server quite a bit with requests.