2

我是 angularjs 的新手，正在尝试创建一个单页应用程序。我有一个代码非常简单的家庭控制器。类似于本教程的内容

Angular JS 控制器使用如下代码初始化：

var phonecatApp = angular.module('phonecatApp', []);
phonecatApp.controller('PhoneListCtrl', function ($scope) {
  $scope.phones = [
    {'name': 'Nexus S',
     '_id': 1,
     'snippet': 'Fast just got faster with Nexus S.'},
    {'name': 'Motorola XOOM™ with Wi-Fi',
     '_id': 2,
     'snippet': 'The Next, Next Generation tablet.'},
    {'name': 'MOTOROLA XOOM™',
     '_id': 3,
     'snippet': 'The Next, Next Generation tablet.'}
  ];
});

但在生产数据中可能没有那么整齐地打包。现在我的问题是：

我可以创建指向我的对象的 JSON 表示的下载链接吗？

<li ng-repeat="phone in phones">
<a 
  href="data:text/json;charset=utf-8,{{encodeURIComponent(JSON.stringify(phone))}}" 
  download="{{phone._id}}.json">
    JSON
</a>
</li>

我基本上想phone用格式化功能访问当前对象encodeURIComponent(JSON.stringify(phone))。

有没有办法巧妙地做到这一点？

4

2 回答 2

2

我基本上想使用格式化函数 encodeURIComponent(JSON.stringify(phone)) 访问当前对象电话。

您只需向控制器添加一个方法：工作示例（集合）

$scope.encodeJson = function(phone) {
  return encodeURIComponent(JSON.stringify(phone));
}

<a href="data:text/json;charset=utf-8,{{encodeJson(data)}}" download="{{filename}}">

您可能还需要清理 URL

对于集合，它基本上是相同的：

<p ng-repeat="item in collection">
  <a href="data:text/json;charset=utf-8,{{encodeJson(item)}}" download="{{item.id}}.json">
</p>

此外，您可能需要使用 ng-repeat 中的“track by item.id”语法删除由 ng-repeat- 添加的 $$HashKey。

另一种方法是将这些函数添加到$scope自身并在 ng-* 属性中使用它们。

$scope.encodeURIComponent = encodeURIComponent;
$scope.JSON = JSON;
于 2015-11-22T13:59:37.977 回答
2

感谢rnrneverdies的建议，我在配置中添加了以下内容

phonecatApp.config(['$compileProvider', function ($compileProvider) {
  $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|tel|file|data|blob):/);
}]);

以及这些函数到控制器中的 $scope

$scope.stripClone = function(obj) {
  if (null == obj || "object" != typeof obj) return obj;
  var copy = obj.constructor();
  for (var attr in obj) {
    if (obj.hasOwnProperty(attr) && attr != '$$hashKey') {
      var obj_attr = obj[attr];
      if (typeof obj_attr == "object"){
        copy[attr] = this.stripClone(obj_attr); 
      } else if (typeof obj_attr == "array"){
        copy[attr] =[];
        for(var i =0; i<obj_attr.length; i++){
          copy[attr].push(this.stripClone(obj_attr));
        }
      }else{
        copy[attr] = obj_attr;
      }
    }
  }
  return copy;
};
$scope.myEncodeJson = function(obj){
  return JSON.stringify(this.stripClone(obj));
};

我现在可以在模板中调用这些函数来执行我想要的 json 魔术：

<a ng-href="data:text/json;charset=utf-8,{{myEncodeJson(phone)}}

谢谢你的帮助

于 2015-11-22T16:46:04.920 回答