在 AngularJS 中参数化 $http 响应处理函数答案

【问题标题】：paramaterising $http response handling function in AngularJS在 AngularJS 中参数化 $http 响应处理函数
【发布时间】：2015-10-02 22:02:29
【问题描述】：

我正在尝试将查询字符串作为参数与“$http”一起传递给函数，以获取使用 Angular 返回的一些数据（请参见下面的代码）。

我确定这是一些基本的东西，但我花了 2 天时间浏览 Stack Overflow、ProAngularJS 书籍、w3c 在线 Javascript 和 Angular 文档、Code Academy angularJS……并且我真的被卡住了。

如果我从函数调用中删除“SELECT”并从函数定义中删除查询字符串参数，它可以正常工作，但我需要将查询字符串作为参数传递给函数...

下面的代码...

<html>
<head>
   <title>HHLDSummaryProj </title>
   <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">        </script>
   <script         src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-    route.min.js"></script>
   <script>
      var summaryApp = angular.module("summaryApp", ['ngRoute']);

      summaryApp.config(['$routeProvider',
         function($routeProvider) {
            $routeProvider.
               when('/viewCounts', {
                  templateUrl: 'count.htm',
                  controller: 'topSummaryCtrl'
               }).
               otherwise({
                  redirectTo: '/viewCounts'
              });
         }]);

    /* inject $scope object and data retrieval factories */
    summaryApp.controller('topSummaryCtrl', function($scope, itemSummary){

        itemSummary.success(function(response, "SELECT") { 
            $scope.itemSummaryResults = response.results.bindings;
        });
    });

    summaryApp.factory('itemSummary', function($http, querystring){
        /* 1 count of data triples */
        var query = encodeURIComponent(querystring+' (COUNT(*) AS ?no) { ?s ?p ?o      }');
        var endpoint = "http://localhost:3030/dataset/query";
        return $http.get("http://localhost:3030/dataset/query?query="+query+"&output=json&stylesheet=")
    });
</script>
</head>

<body>
   <h2>Your Data Looks Like This ... </h2>
   <div ng-app="summaryApp">
      <div ng-view></div>
      <script type="text/ng-template" id="count.htm">
        <table>
            <tr ng-repeat="x in itemSummaryResults">
                <td>Count of data "records" or "triples": {{ x.no.value }}    </a></td>
            </tr>
        </table>
      </script> <!-- end viewCounts -->
   </div>

</body>
</html>

【问题讨论】：

尽量只放需要的代码和一个代码较少的简单示例，我们可以在 plunk 或类似的东西中尝试
这只是需要的代码！我将尝试制作一个相同失败的更简单示例并将其发布以补充。两个滴答声。
嗨，Nada，希望这个更短的示例可以，只需将其全部放在 HTML 文件中以便于复制。

标签： javascript angularjs https

【解决方案1】：

如何将数据传递给工厂的基本示例：

var summaryApp = angular.module("summaryApp", [])

.controller('topSummaryCtrl', ['$scope', 'itemSummary', function($scope, itemSummary) {

    itemSummary.getItems("12345").success(function(response) { //"12345" is the value passed to the factory
      console.log(response);
    }).error(function(response){
      console.log(response);
    });

}]).factory('itemSummary', ['$http', function($http) {

    return {
        getItems: function(querystring) { //querystring equals to "12345"
          return $http.get("http://echo.jsontest.com/uid/" + querystring + "/value/nuno_bettencourt");
        },
        pushItems: function(object) {
          //do what you want etc etc "itemSummary.pushItems()"
        }
    };

}]);

这是你要求的吗？

在您的示例中，您将“querystring”变量作为依赖项传递，例如服务、工厂、提供者...

另一件事...您确定要将完整的 sql QUERY 作为 URL 参数传递吗？删除表，截断表...

【讨论】：

娜达，你是个传奇。谢谢你。发布带有查询而不是“12345”的代码，以防万一其他人想要参考，尽管我相信他们可以像我一样通过应用您的回复来弄清楚！

【解决方案2】：

为了参考的完整性，这是我的原始代码修改为使用上述 Nada 的方法：

<html>
<head>
   <title>HHLDSummaryApp </title>
   <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">    </script>
   <script     src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-    route.min.js"></script>
   <script>
      var summaryApp = angular.module("summaryApp", ['ngRoute']);

  summaryApp.config(['$routeProvider',
     function($routeProvider) {
        $routeProvider.
           when('/viewCounts', {
              templateUrl: 'count.htm',
              controller: 'topSummaryCtrl'
           }).
           otherwise({
              redirectTo: '/viewCounts'
          });
     }]);


summaryApp.controller('topSummaryCtrl', ['$scope', 'itemSummary', function($scope, itemSummary) {

itemSummary.getItems("SELECT (COUNT(*) AS ?no) { ?s ?p ?o }").success(function(response) { //"12345" is the value passed to the factory
    $scope.itemSummaryResults=response.results.bindings;
  console.log(response);
}).error(function(response){
  console.log(response);
});

}]).factory('itemSummary', ['$http', function($http) {

return {
    getItems: function(querystring) { //querystring equals to "12345"
      return $http.get("http://localhost:3030/dataset/query?query=" + querystring + "&output=json&stylesheet=");
    },
    pushItems: function(object) {
      //do what you want etc etc "itemSummary.pushItems()"
    }
};

}]);

</script>
</head>

<body>
   <h2>Your Data Looks Like This ... </h2>
   <div ng-app="summaryApp">
      <div ng-view></div>
      <script type="text/ng-template" id="count.htm">
        <table>
            <tr ng-repeat="x in itemSummaryResults">
                <td>Count of data "records" or "triples": {{ x.no.value }}        </a></td>
            </tr>
        </table>
      </script> <!-- end viewCounts -->
   </div>

</body>
</html>

查询参数化，感谢感谢！

【讨论】：