Question

我得到了帮助，将json保存为客户端here中的文件。代码很短，就像这个小提琴一样。

var a = document.createElement('a');
a.download    = "backup.json";
a.href        = url;
a.textContent = "Download backup.json";

document.getElementById('content').appendChild(a);

我试图创建一个angularjs指令，以便它调用范围内的方法来获取数据。沿着这条线。

module.directive('myDownload', function ($compile) {
    return {
        restrict:'E',
        scope:{ getData:'&getData'},
        link:function (scope, elm, attrs) {
            elm.append($compile(
                '<a class="btn" download="backup.json"' +
                    'href=' + scope.getData() + '>' +
                    'Download' +
                    '</a>'
            )(scope));
        }
    };
});

这不起作用。如何将linked fiddle变为指令？

Answer 1

这样的事情：Fiddle

这是指令代码：

module.directive('myDownload', function ($compile) {
  return {
    restrict:'E',
    scope:{ getUrlData:'&getData'},
    link:function (scope, elm, attrs) {
        var url = URL.createObjectURL(scope.getUrlData());
        elm.append($compile(
            '<a class="btn" download="backup.json"' +
                'href="' + url + '">' +
                'Download' +
                '</a>'
        )(scope));
     }
  };
});

控制器：

module.controller('MyCtrl', function ($scope){
  var data = {a:1, b:2, c:3};
  var json = JSON.stringify(data);

  $scope.getBlob = function(){
    return new Blob([json], {type: "application/json"});
  }
});

Answer 2

我最终在这里试图解决类似的问题。在我的Angular页面中，我有一个通过Ajax检索的JSON，它呈现为HTML，但我想要＆＃34; raw＆＃34; JSON可通过链接下载。

运行OP和最多投票方法的问题是HTML DOM在您的控制器中被操纵，这种方式违背了使用MVVM的目的。我认为你做这一切的原因是因为Angular阻止了blob链接的创建（通过预先挂起＆＃39;不安全：＆＃39;到生成的blob URL）。

幸运的是，Angular provides a way to apply a whitelist certain URL prefixes因此在您使用URL.createObjectURL()时不会被阻止...在这种情况下，我们包含blob

这是我对JSFiddle

运行的看法

创建[下载]按钮的指令

2 个答案: