Javascript 在角度过滤器中使用自定义过滤器、指令和http GET请求？

过去几周我一直在研究angularjs，我不知道如何在过滤器中添加ajax请求时使我的自定义指令和自定义过滤器相互工作（不确定在过滤器中添加ajax请求是否是个好主意）

首先是一些背景：

我有一个项目列表和一个搜索字段。使用angular的双向绑定创建列表并添加搜索/过滤功能对我来说非常简单。现在，我只想在用户停止键入后进行过滤。我使用下划线/lodash提供的去盎司函数实现了这一点。该过程的下一步是用户停止键入- i） 抓取搜索文本 ii）发出http请求并 iii）根据服务器的响应过滤列表，例如，如果服务器返回按类别过滤：foo，则使用foo进行过滤。到目前为止，我已经成功地在用户停止键入时进行过滤，并根据一些硬编码的类别进行过滤（不使用ajax）。我已经添加了示例代码-它不起作用，但将提供我到目前为止所做工作的背景

我的问题是- 1.我无法在等待ajax完成时进行过滤 2.我确信这不是解决我问题的最佳方式，请建议实现我目标的最佳方式

我也找不到任何与谷歌相关的东西

---

相关Html视图

<my-input type="search" data-ng-model="ts.search" placeholder="search"></c1-input>

<ul data-ng-repeat="car in cars">
  <li>{{car.name}} </li>
</ul>

{{car.name}

相关javascript

app.controller('MainController', ['$scope', 'carsFactory', function ($scope, carsFactory) {
    $scope.cars = carsFactory.getCars();
    $scope.filteredCars = $scope.cars;
}]);

app.directive('myInput', function ($parse, $filter) {
  return {
    restrict: "E",
    replace: true,
    transclude: true,
    template: '<input ng-translude/>',
    compile: function (cElement, cAttrs) {
      var modelAccessor = $parse(cAttrs.ngModel);

      return function (scope, element, attrs, controller) {
        // Filter only after user has stopped typing
        scope.$watch(modelAccessor, _.debounce(function (val) {
          scope.typed = scope.typing;
          scope.$apply(function () {
            modelAccessor.assign(scope, val);
            scope.filteredCars = $filter('myFilter')(scope.cars, val);
          });
        }, 500))
      } 
    }
  }
});

app.factory('carsFactory',['$http', function ($http) {
  return {
    // This actually makes a ajax request
    getCars: function () {
      return cars;
    }
  }

  var cars = [{name: 'Focus ST', category: 'hatchback'}, 
  {name: 'Audi S5', category: 'coupe'},
  {name: 'Audi S4', category: 'sedan'},
  {name: 'Mazda 3', category: 'hatchback'},
  {name: 'Mazda 3', category: 'sedan'}]
}]);


app.filter('myFilter', ['$filter', function ($filter) {

  // should make http request
  // should grab response and apply custom filters on the transactions

  function makeHttpRequest (cars, searchText) {
    // Here it should make a http request and return category.
    // Next, filter should be applied based on category
    return cars;
  }

  return function (cars, searchText) {
    if (searchText) {
      cars =  makeHttpRequest(cars, searchText);
    }
    return cars;
  };
}]);

app.controller（'MainController'，['$scope'，'carsFactory'，function（$scope，carsFactory）{
$scope.cars=carsFactory.getCars（）；
$scope.filteredCars=$scope.cars；
}]);
app.directive（'myInput'，function（$parse，$filter）{
返回{
限制：“E”，
替换：正确，
是的，
模板：“”，
编译：函数（cElement、cAttrs）{
var modelacessor=$parse（cAttrs.ngModel）；
返回函数（范围、元素、属性、控制器）{
//仅在用户停止键入后筛选
作用域：$watch（modelAccessor，u.debounce（function，val）{
scope.typed=scope.typed；
作用域：$apply（函数（）{
modelAccessor.assign（范围，val）；
scope.filteredCars=$filter（'myFilter'）（scope.cars，val）；
});
}, 500))
} 
}
}
});
app.factory（'carsFactory'，['$http'，function（$http）{
返回{
//这实际上发出了一个ajax请求
getCars：函数（）{
返回车辆；
}
}
var cars=[{name:'Focus ST'，category:'hatchback'}，
{名称：'Audi S5'，类别：'coupe'}，
{名称：'奥迪S4'，类别：'轿车'}，
{名称：'Mazda 3'，类别：'hatchback'}，
{名称：'马自达3'，类别：'轿车'}]
}]);
app.filter（'myFilter'，['$filter'，函数（$filter）{
//应该发出http请求
//应获取响应并对事务应用自定义筛选器
函数makeHttpRequest（汽车、搜索文本）{
//在这里，它应该创建一个http请求和返回类别。
//接下来，应该根据类别应用过滤器
返回车辆；
}
返回功能（汽车、搜索文本）{
如果（搜索文本）{
cars=makeHttpRequest（cars，searchText）；
}
返回车辆；
};
}]);

下面是我如何解决这个问题的。如果我错了，请纠正我

模板

汽车

{{car.name}

---

剧本

//定义具有路由依赖关系的应用程序
var-app=angular.module（“myApp”[“ngRoute”]）；
app.config（['$routeProvider'，'$locationProvider'，函数（$routeProvider，$locationProvider）{
$routeProvider
.when（'/t'{
控制器：“主控制器”，
templateUrl:'main.html'
})
。否则（{重定向到：'/t'}）；
$locationProvider.html5Mode（true）；
}]);
app.controller（'MainController'，['$scope'，'carsFactory'，'categoryFactory'，'$filter'，函数（$scope，carsFactory，categoryFactory，$filter）{
$scope.myModel.searchField={}；
$scope.myModel.cars=carsFactory.getCars（）；
$scope.myModel.filteredCars=$scope.myModel.cars；
$scope.myModel.search=函数（查询）{
如果（！query）返回false；
var filterCat=categoryFactory.getFilterCategory（查询）；
$scope.myModel.filteredCars=$filter（$myFilter'）（$scope.myModel.cars，filterCat.category）；
}
}]);
app.directive（'myInput'，function（$parse，$filter）{
返回{
限制：“E”，
替换：正确，
是的，
模板：“”，
链接：功能（范围、元素、lAttrs）{
var modelacessor=$parse（cAttrs.ngModel）；
作用域：$watch（modelAccessor，u.debounce（function，val）{
作用域：$apply（函数（）{
scope.myModel.search（val）；
});
}, 500));
}
};
});
app.factory（'carsFactory'，['$http'，function（$http）{
var cars=[{name:'Focus ST'，category:'hatchback'}，
{名称：'Audi S5'，类别：'coupe'}，
{名称：'奥迪S4'，类别：'轿车'}，
{名称：'Mazda 3'，类别：'hatchback'}，
{名称：'马自达3'，类别：'轿车'}]；
返回{
//这实际上会发出一个ajax请求并返回可用汽车的列表
getCars：函数（）{
返回车辆；
}
}
}]);
应用程序工厂（'categoryFactory'，函数（）{
var类别={category:“sedan”}；
返回{
//使用查询参数发出ajax请求并返回示例响应
getFilterCategory:函数（查询）{
退货类别；
}
}
});
app.filter（'myFilter'，['$filter'，函数（$filter）{
功能过滤器（汽车，类别）{
//假设我们在实际过滤之前在这里做一些复杂的计算
返回$filter（'filter'）（cars，{category:category}）；
}
返回功能（车辆、类别）{
车辆=过滤器（车辆，类别）；
返回车辆；
};
}]);

所以我设法让它工作了。我没有尝试在过滤器中使用ajax（这显然是一种错误的方法），而是创建了一个工厂utiliz

<h2>Cars</h2>

<my-input type="search" data-ng-model="myModel.searchField" placeholder="search"></my-input>

<ul data-ng-repeat="car in myModel.filteredCars">
   <li>{{car.name}} </li>
</ul>

// Defining app with route dependency
var app = angular.module("myApp", ["ngRoute"]);
app.config(['$routeProvider', '$locationProvider', function ($routeProvider,  $locationProvider) {
  $routeProvider
    .when('/t', {
        controller: 'MainController',
        templateUrl: 'main.html'
      })
    .otherwise({ redirectTo: '/t' });

    $locationProvider.html5Mode(true);
}]);

app.controller('MainController', ['$scope', 'carsFactory','categoryFactory','$filter', function ($scope, carsFactory, categoryFactory, $filter) {
    $scope.myModel.searchField = {};
    $scope.myModel.cars = carsFactory.getCars();
    $scope.myModel.filteredCars = $scope.myModel.cars;
    $scope.myModel.search = function (query) {
      if (!query) return false;

      var filterCat = categoryFactory.getFilterCategory(query);

      $scope.myModel.filteredCars = $filter('myFilter')($scope.myModel.cars, filterCat.category);

    }
}]);

app.directive('myInput', function ($parse, $filter) {
  return {
    restrict: "E",
    replace: true,
    transclude: true,
    template: '<input ng-translude/>',
    link: function (scope, lElement, lAttrs) {
      var modelAccessor = $parse(cAttrs.ngModel);

      scope.$watch(modelAccessor, _.debounce (function (val) {
        scope.$apply(function () {
          scope.myModel.search(val);
        });
      }, 500));
    }
  };
});

app.factory('carsFactory',['$http', function ($http) {
  var cars = [{name: 'Focus ST', category: 'hatchback'}, 
  {name: 'Audi S5', category: 'coupe'},
  {name: 'Audi S4', category: 'sedan'},
  {name: 'Mazda 3', category: 'hatchback'},
  {name: 'Mazda 3', category: 'sedan'}];

  return {
    // This actually makes a ajax request and returns list of available cars
    getCars: function () {
      return cars;
    }
  }


}]);

app.factory('categoryFactory', function () {
  var category = {category: "sedan"};

  return {
  // make an ajax request with query parameter and return sample response
    getFilterCategory: function (query) {
      return category;
    }
  }

});


app.filter('myFilter', ['$filter', function ($filter) {

  function filter(cars, category) {
// Assuming we are doing some complex calculations here before we actually filter
    return $filter('filter')(cars, {category: category});
  }

  return function (cars, category) {

    cars =  filter(cars, category);

    return cars;
  };
}]);