angularjs – Angular：如何在过滤器中使用$http

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

对于目前的问题,我使用了一个$timeout和在我的小提琴中有希望的承诺：
my fiddle

在我的过滤器中,我使用一个$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>

你可以看到过滤器没有返回任何东西,并且在过滤器中有一个无限循环,因为我认为是空的承诺.

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

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

我希望有人能帮助我.

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

这里的问题是您立即从过滤器函数返回承诺.这是因为过滤器而言,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",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>

如果你有很多公司,你应该预先加载这些名字(最初可能会发送他们的第一个答案),因为你会像你的服务器那么多的请求.

原文地址：https://www.jb51.cc/angularjs/143144.html

angularjs – Angular：如何在过滤器中使用$http

相关推荐