Сохранить объект в файле JSON в angularjs?

Question

Я новичок в angularjs и стараюсь создать одностраничное приложение. У меня есть домашний контроллер с очень простым кодом. Что-то вдоль линий this tutorial

углового контроллера 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)).

Есть ли способ сделать это аккуратно?

Answer 1

Благодаря предложениям rnrneverdies я добавил следующее конфиге

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

и эти функции в $ объема в контроллере

$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 magic я хотел:

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

Спасибо за вашу помощь

Answer 2

В основном я хочу получить доступ к текущему объекту телефона с помощью функции форматирования encodeURIComponent (JSON.stringify (телефон)).

Вы просто добавить метод к контроллеру: working example (collections)

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

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

Вам также может понадобиться sanitize the URL

Для коллекции это в основном то же самое:

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

Кроме того, вы, возможно, потребуется удалите $$ HashKey -added by ng-repeat-, используя синтаксис «track by item.id» в ng-re торф.

Другой подход может добавлять эти функции непосредственно к $scope и использовать их внутри атрибутов ng- *.

$scope.encodeURIComponent = encodeURIComponent; 
$scope.JSON = JSON;