Direttiva per creare un pulsante [download]

Ho ottenuto aiuto per salvare json come file sul lato client here. Il codice è molto breve come in questo violino.Direttiva per creare un pulsante [download]

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

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

stavo cercando di creare una direttiva angularjs in modo che chiama un metodo di portata per ottenere i dati. Lungo questa linea.

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

Questo non funziona. Come può rendere linked fiddle una direttiva?

fonte

2013-05-02 bsr

Che ne dite di qualcosa di simile: Fiddle

Ecco il codice direttiva:

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

Controller:

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

fonte

2013-05-02 16:58:14 mfelix

cool .. Grazie mille !!! – bsr

beh, un piccolo problema però. È possibile recuperare nuovi dati ogni volta che clicco sul link. Ho notato che getBlob() chiama solo una volta, inizialmente. È possibile? – bsr

In tal caso, inizierei legando l'ambito della direttiva a qualsiasi dato nel campo di applicazione del controllore possa modificare i dati che verranno dati facendo clic sul collegamento. Poi proverei ad usare scope. $ Guarda su quelle proprietà vincolate all'interno della funzione di collegamento della direttiva per farlo rigenerare il link di download ogni volta che qualcuno cambia. Questo è quello che ti viene in mente, ma forse c'è un modo migliore. – mfelix

sono finito qui cercando di risolvere un problema simile. nella mia pagina Angular, ho un JSON recuperato tramite Ajax che è reso come HTML, ma volevo che il JSON "raw" fosse scaricabile tramite un link.

il problema con l'approccio OP e più votato è che il DOM HTML viene manipolato all'interno del controller, che sconfigge lo scopo di utilizzare MVVM. Penso che la ragione per cui stai facendo tutto questo è perché i blocchi angolari creano collegamenti per blob (pre-in sospeso 'non sicuro:' all'URL del blob risultante).

Fortunatamente, Angular provides a way to apply a whitelist certain URL prefixes quindi non sarà bloccato quando si utilizza URL.createObjectURL() ... in questo caso, includiamo blob

Ecco il mio prendere su di esso in esecuzione su JSFiddle

fonte

2014-10-22 18:45:41

Direttiva per creare un pulsante [download]

risposta

Problemi correlati