在 angularjs 中转换 $.param答案

【问题标题】：Convert $.param in angularjs在 angularjs 中转换 $.param
【发布时间】：2014-06-17 03:17:08
【问题描述】：

在我使用 JQuery 之前，我使用它来发送带参数的 URL

window.location = myUrl + $.param({"paramName" : "ok","anotherParam":"hello"});

但是对于 angularjS，这并不能以同样的方式工作

$scope.myButton = function() {
    $window.location.open = myUrl + $.param({"paramName" : "ok","anotherParam":"hello"});
};//Error: $ is not defined

谁能帮我在angularJs中做到这一点

【问题讨论】：

你想在这里做什么？
这样，www.test.com?option=ok
如果要使用 jquery 函数，请添加 jquery。否则你需要用旧的javascript方式来做。
angular 使用 jquery lite - 最终您可能希望在单击按钮时处理 angular 指令
我认为您想要类似 $location.path('xxurlxx') 的东西，但我不确定该参数，因为我不熟悉您尝试使用 option 做什么

标签： javascript jquery angularjs url param

【解决方案1】：

在 Angular 中有一个内置的序列化器，它模仿 $.param()： $httpParamSerializerJQLike

【讨论】：

请注意，$httpParamSerializer 和 $httpParamSerializerJQLike 自 Angular 1.4 起可用
这应该是真正的答案

【解决方案2】：

如果您尝试像$.param() 那样创建数据的序列化表示，

function serializeData( data ) { 
    // If this is not an object, defer to native stringification.
    if ( ! angular.isObject( data ) ) { 
        return( ( data == null ) ? "" : data.toString() ); 
    }

    var buffer = [];

    // Serialize each key in the object.
    for ( var name in data ) { 
        if ( ! data.hasOwnProperty( name ) ) { 
            continue; 
        }

        var value = data[ name ];

        buffer.push(
            encodeURIComponent( name ) + "=" + encodeURIComponent( ( value == null ) ? "" : value )
        ); 
    }

    // Serialize the buffer and clean it up for transportation.
    var source = buffer.join( "&" ).replace( /%20/g, "+" ); 
    return( source ); 
}

并将其用于您的数据序列化

【讨论】：

这个功能怎么用？？
如果数据包含嵌套对象，则此函数将不起作用，即：如果您的数据类似于 {foo:[{id:1, val:'test'},{id:2, val :'test2'}], bar:{test:'myTest'}} 不行
不要重新发明轮子。如果 jQuery 实现了这个，请使用它。不要太害怕混合这些库。 AngularJS does not replace jQuery.

【解决方案3】：

AngularJs 的核心包含 jquery lite，因此您可以使用 angular.element.param() 而不是 $.param()

【讨论】：

这是最好的答案。编写已经存在的代码不是一个好主意。
.param() 不包含在 jQLite 中：docs.angularjs.org/api/ng/function/angular.element
如果你仍然包含 jQuery，这可能会起作用，因为 Angular 会使用它，但是对于纯 Angular (jQuery Lite)，它会抛出 TypeError: angular.element.param is not a function
不起作用。 Uncaught TypeError: angular.element.param is not a function(…)
我已编辑此答案以避免包含.param() 的 jQuery lite 的错误信息。感谢@AlexRoss 的澄清！

【解决方案4】：

我发现这个函数对 url 序列化很有用。也适用于嵌套对象。

var param = function(obj) {

  if ( ! angular.isObject( obj) ) { 
    return( ( obj== null ) ? "" : obj.toString() ); 
  }
  var query = '', name, value, fullSubName, subName, subValue, innerObj, i;

  for(name in obj) {

    value = obj[name];
    if(value instanceof Array) {
      for(i in value) {

        subValue = value[i];
        fullSubName = name + '[' + i + ']';
        innerObj = {};
        innerObj[fullSubName] = subValue;
        query += param(innerObj) + '&';
      }

    } else if(value instanceof Object) {
      for(subName in value) {

        subValue = value[subName];
        fullSubName = name + '[' + subName + ']';
        innerObj = {};
        innerObj[fullSubName] = subValue;
        query += param(innerObj) + '&';
      }
    }
    else if(value !== undefined && value !== null)
      query += encodeURIComponent(name) + '=' + encodeURIComponent(value) + '&';
  }

  return query.length ? query.substr(0, query.length - 1) : query;
};

【讨论】：

【解决方案5】：

您可以简单地在 javascript 对象上使用 $.param 并将其传递给 $resource 或 $http，它应该可以正常工作。一个警告是确保它是一个对象而不是一个数组。

var badParam = {'name':'john',...}; // contains more properties
var goodParam = {name :'john',...}; // contains more properties

【讨论】：

【解决方案6】：

您可以注入并使用此函数：$httpParamSerializerJQLike()

【讨论】：