如何解析angularjs中的查询字符串

时间:2014-05-03 04:02:32

标签: angularjs

我是angularjs的新手。我完全不知道如何解析查询字符串,我可以传递给我的服务器端调用。例如。

http://localhost?interval=5

下面是我的HTML。那么......我哪里错了?感谢

 <!DOCTYPE html> <html>   <head>    <script type="text/javascript"
    src="static/js/jquery/jquery-2.1.0.js"></script>
        <script type="text/javascript" src="static/js/flot/jquery.flot.js"></script>
        <script type="text/javascript" src="static/js/angular/angular.min.js"></script>
        <script type="text/javascript" src="static/lib/flot/controller.js"></script>
        <style type='text/css'>
           chart {
                display:none;
                width:800px;
                height:400px;       }    </style>  </head>  <body>  <div ng-app='App'>
            <div ng-controller='Ctrl'>
                <chart data='data'></chart>
            </div>  </div>       </body> </html>



var App = angular.module('App', []);
"use strict";

App.controller('Ctrl', function ($location,$scope,$http) {

    $locationProvider.html5Mode(true);
    var interval = $location.search()['interval'];
    var qs = 'flot_forecast?test=' + interval;
    $http.get(qs).success(function(data) {
        var data1 = data.observed;
        var data2 = data.forecast; 
        var data = [{data:data1,label: "observed"},
                    {data:data2,label: "forecast"}
                   ];
        $scope.data = data;
    });

});


App.directive('chart', function() {
  return {
            restrict: 'E',
            scope: {data: '='},
            link: function(scope, elem, attrs) {
              scope.$watch('data', function() {
                if (scope.data.length > 0) {
                  var options = {
                      legend: { show: true},
                      lines:{show:true},
                      points:{show:true},
                      grid: {backgroundColor: '#ffffff'}
                  };
                  $.plot(elem, scope.data, options);
                  elem.show();
                }
              });
            }
          };//End return
});//End App

如果我替换这些行:

    $locationProvider.html5Mode(true);
    var interval = $location.search()['interval'];
    var qs = 'flot_forecast?test=' + interval;

 with 

  var qs = 'flot_forecast?test=5';

图表显示。另外......我得到一个空白页面。

1 个答案:

答案 0 :(得分:0)

$ location.search()返回一个对象,因此你需要像文档那样使用它。

var params = $location.search();

这使得params等于:

{ interval : 5 }