Question

我尝试使用不同的值在http调用中进行搜索，具体取决于我所处的视图。

我的工厂看起来像这样：

.factory('SearchService', ['$http','$filter', function($http, $filter) {

  var service = {

    getAllExhibitors : function () {
        var searchindex = 'Berliner';
        var url = '...';
        var config = {
            params: {
                search: searchindex
            },
            cache:true
        };
        $http.get(url, config).then(function (data) {
          service.datafairs = data.data.rows;
          ...
        });
    }...

正如您所看到的，我传递了一个硬编码变量searchindex作为搜索参数。

我可以根据我在

中的视图设置此变量吗？

我对路由器的配置如下所示：

.config(function($stateProvider) {

  var berlinerState = {
    name: 'berliner',
    url: '/berlinerliste/',
    views: {
      'header': {   
        templateUrl: 'header.htm'   
      },
      'main':{    
        templateUrl: 'bl2017.htm'    
      }
    }
  }

  var koelnerState = {
    name: 'koelner',
    url: '/koelnerliste/',
    views: {
      'header': {   
        templateUrl: 'header.htm'   
      },
      'main':{    
        templateUrl: 'kl2017.htm'    
      }
    }
  }

  ...

例如，/ berlinerliste，searchindex = X和/ koelnerliste，searchindex = Y

任何提示？

Answer 1

当你打电话给你的工厂时，你可以传递实际的州名，并根据这个值在getAllExhibitors方法上定义searchIndex。

getAllExhibitors : function (stateName) {
    var searchindex = '';
    var url = '...';
    var config = {
        params: {
            search: searchindex
        },
        cache:true
    };
    if(stateName === 'berliner'){
       config.params.search = 'asdf'
    }
    .... 

    $http.get(url, config).then(function (data) {
      service.datafairs = data.data.rows;
      ...
    });
}...

并从您的控制器注入$ state服务并向该方法发送$state.current.name

的值

另一种方式是直接在您的服务上注入$ state服务，如下所示：

.factory('SearchService', ['$http','$filter','$state', function($http, $filter, $state){

      var service = {

    getAllExhibitors : function () {
        var searchindex = 'Berliner';
        var url = '...';
        var config = {
            params: {
                search: searchindex
            },
            cache:true
        };
        if($state.current.name === 'berliner') {
            config.params.search = 'asdf'
        }
    ....
        $http.get(url, config).then(function (data) {
          service.datafairs = data.data.rows;
      ...
    });
}...

Answer 2

使用$ http等异步API时，最好返回承诺：

app.service('SearchService', function($http, $filter) {    
    this.getAllExhibitors = function (searchArg) {
        var searchindex = searchArg || 'Berliner';
        var url = '...';
        var config = {
            params: {
                search: searchindex
            },
            cache:true
        };
        //RETURN promise
        ͟r͟e͟t͟u͟r͟n͟ $http.get(url, config).then(function (response) {
              ͟r͟e͟t͟u͟r͟n͟  response.data.rows;              
        });
    };
});

然后在控制器中，从承诺中提取数据：

app.controller("viewController", function($scope, SearchService, $state) {
    var searchArg = $state.current.name;
    var promise = SearchService.getAllExhibitors(searchArg);
    promise.then(function(rows) {
        $scope.rows = rows;
    });  
});

另请注意，getAllExhibitors函数已被修改为接受search参数。

return statement是一个非常有用的东西，不够用。

在AngularJS和UI路由器中将变量从配置传递到工厂

2 个答案: