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

Question

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

目前这个问题我使用了$ timeout和我小提琴中有角度的承诺: 我的小提琴

在我的过滤器中,我使用带有promise的$ 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;
};

});

然后在我的视图中,我使用我的过滤器,假设显示"ca marche",延迟2秒,但这不起作用:

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

您可以看到过滤器没有返回任何内容,并且由于我认为的null承诺,过滤器中存在无限循环.

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

{{user.company_id | ShowNameCompany}}

所以,我需要在过滤器中向我的后端公司控制器请求http.

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

Answer 1

我认为你不应该这样使用过滤器.过滤器用于根据可选参数转换输入.

这里的问题是你立即从过滤函数返回一个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>

如果你有很多公司,你应该预先加载名称(可能最初发送它们的第一个响应？),因为你要在服务器上轰炸你的服务器.