एक [डाउनलोड] बटन

Question

बनाने के लिए निर्देश मुझे जेसन को क्लाइंट साइड here में फ़ाइल के रूप में सहेजने में मदद मिली। इस पहेली में कोड बहुत छोटा है।

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

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

मैं एक कोणीय निर्देश बनाने की कोशिश कर रहा था ताकि वह डेटा प्राप्त करने के लिए एक विधि को कॉल कर सके। इस लाइन के साथ।

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

मैं यहाँ समाप्त हो गया एक ऐसी ही समस्या को हल करने की कोशिश कर रहा। मेरे कोणीय पृष्ठ में, मेरे पास एक JSON को अजाक्स के माध्यम से पुनर्प्राप्त किया गया है जिसे HTML के रूप में प्रस्तुत किया गया है, लेकिन मैं चाहता था कि "कच्चे" JSON को एक लिंक के माध्यम से डाउनलोड किया जा सके।

ओपी और सबसे अधिक वोट किए गए दृष्टिकोण के साथ समस्या यह है कि एचटीएमएल डोम आपके नियंत्रक के भीतर छेड़छाड़ की जाती है, जो एमवीवीएम का उपयोग करने के उद्देश्य को हरा देता है। मुझे लगता है कि आप यही सब कर रहे हैं क्योंकि कोणीय ब्लॉक ब्लॉब्स के लिए लिंक का निर्माण करते हैं (पूर्व-लंबित 'असुरक्षित:' परिणामी ब्लॉब यूआरएल में)।

सौभाग्य से, Angular provides a way to apply a whitelist certain URL prefixes इसलिए इसे अवरुद्ध नहीं किया जाएगा जब आप URL.createObjectURL() का उपयोग करें ... इस मामले में, हम में शामिल blob

यहाँ उस पर मेरी ले JSFiddle