AngularJS:如何在过滤器中使用$ http [英] AngularJS : How use $http in a filter

问题描述

我想在过滤器中向后端提出请求，并返回请求的结果. 问题在于服务$ http返回了承诺，这就是问题.

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.

目前，我在提琴中使用了$ timeout和angular的承诺: 我的小提琴

For present the issue I used a $timeout and the promises of angular in my fiddle : my fiddle

在我的过滤器中，我使用带有承诺的$ timeout，但是最终目标是使用请求http:

In my filter I use a $timeout with a promise but the final goal is to use a request http :

myApp.filter('filterHello', function ($http,$timeout,$q) {
return function (company_id) {
    console.log("in the filter");
    var deferred = $q.defer();   
    $timeout(function() {
        deferred.resolve("ca marche");
    }, 2000);                  
    return deferred.promise;
};

});

然后在我看来，我使用的过滤器应该延迟2秒显示"ca marche"，但这是行不通的:

Then in my view I use my filter who is suppose to display "ca marche" with a delay of 2 secondes but that doesn't work :

<div ng-controller="MyCtrl">
   {{hello|filterHello}}
</div>

您会看到过滤器什么也不返回，并且由于我认为为null承诺，过滤器中存在无限循环.

You can see that the filter return nothing and that there is an infinite loop in the filter because of the null promise I think.

如果您不明白为什么我要在过滤器中使用请求http，那么答案很简单. 例如，我有一个对象用户，其字段为:email，name，company_id .. 我还有另一个对象公司，其字段为:name，createOn，... 我想使用这样的过滤器来显示用户公司的名称:

If you don't understand why I want use a request http in a filter the answer is simple. For exemple I have an object user with the fields : email,name,company_id.. And I have an other object company with the fields : name, createOn,... I would like use the filter like this for display the name of the user's company :

{{user.company_id | ShowNameCompany}}

{{user.company_id | ShowNameCompany}}

因此，我需要在过滤器中向后端的公司控制器发送请求http.

So, I need to do a request http in the filter to my company controller of my backend.

我希望有人能帮助我.

推荐答案

我认为您不应以这种方式使用过滤器.过滤器用于根据可选参数转换输入.

I think you should not use filters that way. Filters are for transforming inputs based on optional params.

这里的问题是您将立即从filter函数返回一个promise.过滤器的结果使Angular无法解决.

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
  };
});

并在模板中:

<div ng-controller="MyCtrl">
  {{hello|filterHello:filterParams}}
</div>

只需阅读您的解释.对我来说，这将是指令的候选人:

Just read your explanation. To me, this would be a candidate for a directive:

app.directive("companyName", ['$http', function(http) {
  return {
    template: "<span>{{name}}</span>",
    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";
      });
    }
  }
}]);

并在模板中:

<span company-name company-id="user.company_id"></span>

如果您有很多公司，则应该预先加载名称(也许会首先发送给他们第一个响应?)，因为您会大量向服务器发送请求.

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.

这篇关于AngularJS:如何在过滤器中使用$ http的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！