Dyrektywa o utworzeniu przycisku [pobierz]

Question

Mam pomoc, aby zapisać json jako plik po stronie klienta here. Kod jest bardzo krótki, jak w tym skrzypcach.

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

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

Próbowałem utworzyć dyrektywę angularjs tak, aby wywoływała metodę w zakresie, aby uzyskać dane. Wzdłuż tej linii.

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

To nie działa. Jak wprowadzić linked fiddle do dyrektywy?

Answer 1

Jak o coś takiego: Fiddle

Oto kod dyrektywy:

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

Kontroler:

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

skończyło się tu stara się rozwiązać podobny problem. na mojej stronie Angular, mam JSON pobrany przez Ajax, który jest renderowany jako HTML, ale chciałem, aby "surowy" JSON mógł być pobrany za pomocą linku.

Problem z podejściem OP i najczęściej głosowanym polega na tym, że HTML DOM jest manipulowany w kontrolerze, co w pewnym stopniu uniemożliwia wykorzystanie MVVM. Myślę, że powodem, dla którego robisz to wszystko, jest to, że Angular blokuje tworzenie linków dla obiektów typu blob (przez oczekujące "niebezpieczne" do wynikowego adresu URL typu blob).

szczęście Angular provides a way to apply a whitelist certain URL prefixes więc nie będą blokowane podczas korzystania URL.createObjectURL() ... w tym przypadku należą blob

tutaj jest moje zdanie na nim działa na JSFiddle