如何将对象序列化为 ng-include 的参数

How to serialize object to params for ng-include?

本文关键字：ng-include 参数 序列化 对象      更新时间：2023-09-26

如何构建可用作参数的对象序列化数组，以ng-include从服务器加载动态数据？

角度控制器和参数与请求：

app.controller("MyCtrl", function($scope) {
  $scope.elements = [{"id":43,"grid_id":0,"position":0,"name":"TrescArtykulu","snippet":"","hash_data":{"subname":"Treść artykułu","cache_age":"60","article_id":"15746","category_id":"350"},"element_type":"Plugin"}];
  $scope.previewUrl = function() {
    // return "elements=" + $.param($scope.elements); // elements=TrescArtykulu=
    // GET http://localhost:3000/cms/pages/20/elements=TrescArtykulu= 404 (Not Found)
    // return "elements=" + JSON.stringify($scope.PageElementsAttributes); // elements=[{"id":43,"grid_id":0,"position":0,"name":"TrescArtykulu","snippet":"","hash_data":{"subname":"Treść artykułu","cache_age":"60","article_id":"15746","category_id":"350"},"element_type":"Plugin"}]
    // GET http://localhost:3000/cms/pages/20/elements=[%7B%22id%22:43,%22grid_id%22:0…5746%22,%22category_id%22:%22350%22%7D,%22element_type%22:%22Plugin%22%7D] 400 (Bad Request)
  }
});

角度视图：

<div ng-controller="MyCtrl">
  <ng-include src="previewUrl()"></ng-include>
</div>

我找到了解决方案：

$scope.previewUrl = function() {
  return buildUrl('/cms/pages/preview/', {elements: JSON.stringify($scope.elements)});
}

我正在使用从 Angular buildUrl() 函数中提取的函数，但仍然不知道如何在 MyCtrl 中直接调用它而不将其粘贴到我的代码中：

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('&');
}

您可以创建示例函数来从对象创建 url，例如：

$scope.objectToUrl = function(obj) {
    var ret = [];
    for (var d in obj) {    
      ret.push(encodeURIComponent(d) + "=" + encodeURIComponent(obj[d]));    
    }    
    link = ret.join("&");
    return link
  }

请看下面的演示

var app = angular.module('app', []);
app.controller('homeCtrl', function($scope) {
  $scope.urlObject = {
    "id": 43,
    "grid_id": 0,
    "position": 0,
    "name": "TrescArtykulu",
    "snippet": "",
    "element_type": "Plugin"
  };
  $scope.objectToUrl = function(obj) {
    var ret = [];
    for (var d in obj) {
      ret.push(encodeURIComponent(d) + "=" + encodeURIComponent(obj[d]));
    }
    link = ret.join("&");
    return link
  }
  $scope.test = "a"
  $scope.link = $scope.objectToUrl($scope.urlObject);
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<div ng-app="app">
  <div ng-controller="homeCtrl">
Your object<pre>{{urlObject| json}}</pre>
    <h4>
    Your  url: {{link}}
      </h4>
  </div>
</div>

相关文章：