32

目前我正在玩弄 AngularJS 框架。我正在使用 $route 服务来深度链接到我的单页应用程序。

现在我想在我的应用程序中导航，比如说，只更改当前 URL 的搜索部分。在 JavaScript 中使用 $location 服务很容易，但是如何从当前路由构造一个 href 属性，只替换搜索部分？

我必须手工完成还是有 AngularJS 的方法？

添加：

当然，$location 服务具有计算此类 URL 的所有方法。但我不能使用它，因为 $location 也会将浏览器窗口导航到新的 URL。

手动创建 URL 有另一个复杂性：必须检查是否使用了旧的 #-method 或新的 History API。根据这一点，URL 必须包含 # 符号或不包含。

4

3 回答 3

27

从 v1.4 开始，您可以为此使用$httpParamSerializer：

angular.module('util').factory('urlBuilder', function($httpParamSerializer) {
    function buildUrl(url, params) {
        var serializedParams = $httpParamSerializer(params);

        if (serializedParams.length > 0) {
            url += ((url.indexOf('?') === -1) ? '?' : '&') + serializedParams;
        }

        return url;
    }

    return buildUrl;
});

用法：

要产生http://url?param1=value1&param2=value2_1&param2=value2_2调用它：

urlBuilder('http://url', { param1: 'value1', param2: ['value2_1', 'value2_2'] });
于 2015-09-11T06:50:23.017 回答
13

按照罗伯特的回答，我在 Angular.js 中找到了这些函数。它们是 buildUrl、forEachSorted 和 sortedKeys。builUrl 也使用了 isObject 和 toJson 函数，它们是公共的，所以必须分别改为 angular.isObject 和 angular.toJson。

function forEachSorted(obj, iterator, context) {
    var keys = sortedKeys(obj);
    for (var i = 0; i < keys.length; i++) {
        iterator.call(context, obj[keys[i]], keys[i]);
    }
    return keys;
}

function sortedKeys(obj) {
    var keys = [];
    for (var key in obj) {
        if (obj.hasOwnProperty(key)) {
            keys.push(key);
        }
    }
    return keys.sort();
}

function buildUrl(url, params) {
    if (!params) return url;
    var parts = [];
    forEachSorted(params, function (value, key) {
        if (value == null || value == undefined) return;
        if (angular.isObject(value)) {
            value = angular.toJson(value);
        }
        parts.push(encodeURIComponent(key) + '=' + encodeURIComponent(value));
    });
    return url + ((url.indexOf('?') == -1) ? '?' : '&') + parts.join('&');
}
于 2013-10-13T01:56:20.917 回答
3

正如您在此处的源代码（v.1.1.0）中看到的：

https://github.com/angular/angular.js/blob/v1.1.0/src/ngResource/resource.js#L228

和这里：

https://github.com/angular/angular.js/blob/v1.1.0/src/ngResource/resource.js#L247

Angularjs 不使用内部encodeURIComponent来管理 URI 字符串，但也不提供使用的函数。这些功能是模块内部的（我认为这是一个遗憾）。

如果您想以与 AngularJS 完全相同的方式管理 URI，也许您可​​以将这些函数从源代码复制到您的代码中，并为此创建自己的服务。

于 2012-10-15T13:16:13.200 回答