के साथ कोणीय जेएस निर्देश बनाना मैं एक ऐप पर काम कर रहा हूं जिसमें फ़ाइल अपलोड होंगे। मैं एक पुन: प्रयोज्य फ़ाइल अपलोड घटक बनाना चाहता हूं जिसे फ़ाइल अपलोड कार्यक्षमता की आवश्यकता वाले किसी भी पृष्ठ पर शामिल किया जा सकता है। मैं मूल रूप से सोच रहा था कि मैं सिर्फ एक जेएसपी टैग का उपयोग कर सकता हूं। हालांकि, हमने हाल ही में AngularJS की खोज की है और अब इसे पूरे ऐप में उपयोग करना चाहते हैं। इसलिए, मैं एक निर्देश बनाना चाहता हूं जो मुझे मेरी अपलोड कार्यक्षमता में चिपकने के लिए <myApp-upload> टैग डालने की अनुमति देगा।प्लुपलोड
मैंने पहली बार अपनी अपलोड कार्यक्षमता को अपना स्वयं का HTML पृष्ठ बनाया है ताकि यह सुनिश्चित किया जा सके कि AngularJS Plupload प्लगइन के साथ अच्छी तरह से खेल रहा था। और
function FileUploadCtrl($scope)
{
$scope.uploader = new plupload.Uploader({
runtimes : 'html5,flash,html4',
url : 'media/upload',
max_file_size : '10mb',
container: 'uploadContainer',
drop_element: 'dropArea'
});
$scope.uploader.init();
$scope.uploader.bind('FilesAdded', function(up, files) {
$scope.$apply();
});
}
जब मैं में फ़ाइलें खींचें, मैं फ़ाइल नाम प्रदर्शित होते देख {{uploader.files के उत्पादन:
<html ng-app="myApp">
<head>
<script src="resources/scripts/angular-1.0.1.min.js"></script>
<script src="resources/scripts/myApp.js"></script>
</head>
<body>
<style type="text/css">@import url(resources/scripts/plupload/jquery.plupload.queue/css/jquery.plupload.queue.css);</style>
<script type="text/javascript" src="resources/scripts/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="resources/scripts/plupload/plupload.full.js"></script>
<script type="text/javascript" src="resources/scripts/plupload/jquery.plupload.queue/jquery.plupload.queue.js"></script>
<div id="uploadContainer" ng-controller="FileUploadCtrl">
<div id="dropArea" style="border: 1px black dashed;">Drag files to here<br><br><br></div>
Files to upload:<br>
<div ng-repeat="currFile in uploader.files">{{currFile.name}} ({{currFile.size}})</div>
<br><br>
<!-- For debugging -->
{{uploader.files}}
</div>
</body>
</html>
myApp.js इस तरह दिखता है: मैं एक साथ कुछ इस तरह रखा }} अपलोडर ऑब्जेक्ट में फ़ाइलों को [] से बदलें। तो, अब मैं इसे निर्देश में बनाना चाहता हूं। मैं बॉडी टैग में मौजूद सभी सामग्री लेता हूं और इसे upload.html नामक फ़ाइल में सहेजता हूं।
angular.module('myApp', [])
.directive('myAppUpload', function() {
return {
restrict: 'E',
templateUrl: 'upload.html',
};
});
फिर, मैं इस तरह एक HTML फ़ाइल है:
<html ng-app="myApp">
<head>
<script src="resources/scripts/angular-1.0.1.min.js"></script>
<script src="resources/scripts/myApp.js"></script>
</head>
<body>
<myApp-upload>
This will be replaced
</myApp-upload>
</body>
</html>
जब मैं इस HTML पृष्ठ लोड, <myApp-upload> टैग अपलोड में लाता है मैं तो myApp.js के लिए निम्न गयी। एचटीएमएल फाइल हालांकि, यह किसी भी डेटा बाध्यकारी नहीं करता है। नीचे मैं [] के बजाय {{uploader.files}} देखता हूं कि मैं शुरुआत में देख रहा था जब यह स्वयं का पृष्ठ था।
मैं अंगुलरजेएस के लिए बहुत नया हूं, इसलिए मुझे यकीन है कि मुझे कुछ याद आ रहा है, या कुछ गलत कर रहा है। मैं इस निर्देश को कैसे काम कर सकता हूं?
के लिए एक [fiddles सूची] (https://github.com/angular/angular.js/wiki/JsFiddle-Examples) की जाँच [खींचें और अपलोड उदाहरण छोड़] (http करना सुनिश्चित करें: //jsfiddle.net/danielzen/utp7j/) किसी ने बनाया। –
खैर, ड्रैग और ड्रॉप ठीक काम करता है जब सभी कार्यक्षमता इसका अपना HTML पृष्ठ होता है। मैं सिर्फ यह जानना चाहता हूं कि मैं निर्देश के साथ क्या गलत कर रहा हूं जो इसे काम नहीं करता है। – dnc253