將變量從config傳遞到AngularJS和UI Router中的工廠

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作為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時，最好返回 promise：

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;              
        });
    };
});

然后在控制器中，從promise中提取數據：

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語句是一個非常有用的東西，沒有得到足夠的使用。