html - 如何在Angular UI路由器中将查询字符串附加到URL

我对AngularJS很陌生。我将ui-router和node.js用作我的UI服务器，用于对另一台服务器的API调用。现在，我无法根据用户输入（下拉选择）将查询字符串附加到URL。

我的AngularJS控制器代码：

$scope.getResults = function() {
    server.getResults($scope.myColor, $scope.mySize)
    .success(function(data) {
        results = data;
    });
};

以上功能的AngularJS服务：

app.factory('server', ['$http', function($http){
    return {
        getResults : function(color, size) {
            var req = {};
            req.color = color;
            req.size = size;

            return $http({
                method: 'GET',
                url: 'results',
                params : req
            });
        }
    }
}]);

Angular中的ui-router：

$stateProvider.state('home', {
    url: '/home',
    templateUrl: '/home.html',
    controller: 'MainCtrl',
    data:{
       pageTitle: 'blah'
    }
})

在Node.js中，我的路线是这样的：

app.get("/results", function (req, res) {

    var api = 'some api call/' + req.query.color + '/' + req.query.size;

    request(api, function (error, response, api) {

        if (!error && response.statusCode == 200) {
            res.json({
                Color: req.query.color,
                Size: req.query.size,
                Answer: api
            });
        }
    });
});

我想让浏览器网址从/ home转到/ home？color = Red && size = Large

显然，我没有正确执行此操作，浏览器网址目前不是动态的。请说明如何正确执行此操作。

最佳答案

当状态参数发生更改时，请使用reloadOnSearch: false选项停止重新加载当前路由。

$stateProvider.state('home', {
    url: '/home?color&size',
    templateUrl: '/home.html',
    controller: 'MainCtrl',
    data:{
       pageTitle: 'blah'
    },
    reloadOnSearch: false //would not refresh state, for location changes.
})

控制者

$scope.getResults = function() {
    //change parameter of URL usingn $location.search.
    $location.search('color', $scope.myColor);
    $location.search('size', $scope.mySize);
    server.getResults($scope.myColor, $scope.mySize)
    .success(function(data) {
        results = data;
    });
};