AngularJS：如何在过滤器中使用$ http

Question

我想在过滤器中向后端请求并返回请求的结果。问题是服务$ http返回一个承诺，这就是问题。

对于存在的问题，我用$超时和角度在我的小提琴的承诺： 我的小提琴

在我的过滤器中，我使用带有承诺的$ timeout，但是最终目标是使用请求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”，但这不起作用：

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

您会看到过滤器不返回任何内容，并且由于我认为为null，因此过滤器中存在无限循环。

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

{{user.company_id | ShowNameCompany}}

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

我希望有一个人可以帮助我。

Answer 1

我认为您不应该那样使用过滤器。过滤器用于根据可选参数转换输入。

这里的问题是您将立即从filter函数返回一个promise。过滤器结果使Angular无法处理任何事情。

因此，我的建议是-先获取结果，然后根据结果使用过滤器：

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>

编辑：只需阅读您的解释。对我来说，这将是指令的候选人：

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>

如果您有很多公司，则应该预先加载名称（也许会首先发送给他们第一个响应？），因为您会在服务器上大量询问。