在AngularJS中转换$.param

Question

之前我使用 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中完成这个操作吗？

- vintot

---

像这样，www.test.com?option=ok - vintot

如果您想使用jQuery函数，请添加jQuery。否则，您需要以旧的JavaScript方式完成它。 - Joakim

Angular使用jQuery Lite - 最终您可能需要一个Angular指令来处理按钮被点击的情况。 - ewizard

我认为你想要类似于 $location.path('xxurlxx') 这样的东西，但是我不确定参数，因为我不熟悉你正在尝试使用 option 做什么。 - ewizard

请查看这个ST问题和答案。 - przno

Answer 1

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

- Rafal Zajac

---

请注意，自Angular 1.4以来，$httpParamSerializer和$httpParamSerializerJQLike已经可用。 - akn

这是真正的答案 - sTx

Answer 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 ); 
}

并且使用它来进行数据序列化

- Sudhir Bastakoti

---

如何使用这个函数？ - vintot

如果数据包含嵌套对象，例如：{foo:[{id:1, val:'test'},{id:2, val:'test2'}], bar:{test:'myTest'}}，那么此函数将无法正常工作。 - Josep

不要重复造轮子。如果jQuery已经实现了这个功能，就使用它。不要过于担心混合使用这些库。AngularJS并不能取代jQuery。 - fracz

Answer 3

AngularJs在其核心中使用了jquery lite，因此您可以使用angular.element.param()代替$.param()

- Norman Daniel MQ

---

这是最好的答案。编写已经存在的代码不是一个好主意。 - Doug

.param() 不包含在 jQLite 中：https://docs.angularjs.org/api/ng/function/angular.element - Alex Ross

如果您仍然包含jQuery，这可能会起作用，因为Angular将使用它，但是对于纯Angular（jQuery Lite），它会抛出TypeError: angular.element.param不是一个函数。 - paul

不起作用。Uncaught TypeError: angular.element.param is not a function(…) - chalasr

我已经编辑了这个答案，以避免jQuery lite包含.param()的错误信息。感谢你的澄清，@AlexRoss！ - Zane

我点了踩，因为“AngularJs在其核心中没有jQuery Lite”是不正确的。Alex Ross已经明确表明了这一点。Cabloo试图编辑答案以纠正错误信息。 - Nate Anderson

Answer 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;
};

- scx

Answer 5

你可以在 JavaScript 对象上简单地使用 $.param，并将其传递给 $resource 或 $http，它应该可以正常工作。但需要注意的是确保它是一个对象而不是一个数组。

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

- Titus Okathe

Answer 6

你可以注入并使用这个函数：$httpParamSerializerJQLike()

- enokby