Creating AngularJS directive with Plupload -

-

i'm working on app have file uploads. want create reusable file upload component can included on of pages need file upload functionality. thinking use jsp tag. however, discovered angularjs , want use throughout app. so, want create directive allow me put <myapp-upload> tag stick in upload functionality.

i first made upload functionality it's own html page make sure angularjs playing nicely plupload plugin. put this:

<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 here<br><br><br></div>         files upload:<br>         <div ng-repeat="currfile in uploader.files">{{currfile.name}} ({{currfile.size}})</div>         <br><br>        <!-- debugging -->        {{uploader.files}}     </div> </body> </html>

the myapp.js looks this:

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

when drag files in, see file names appear , output of {{uploader.files}} change [] files in uploader object. so, want make directive. take content that's in body tag , save file called upload.html. added following myapp.js:

angular.module('myapp', []) .directive('myappupload', function () {     return {         restrict: 'e',         templateurl: 'upload.html',     }; });

then, have html file this:

<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>        replaced     </myapp-upload> </body> </html>

when load html page, <myapp-upload> tag bring in upload.html file. however, doesn't of data binding. @ bottom see {{uploader.files}} instead of [] seeing when it's own page.

i'm new angularjs, i'm sure i'm missing something, or doing wrong. how directive working?

i figured out problem. including javascript , css on template html page. tried moving main html file, , worked. in other words, moved

<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>

from upload.html file main, index.html file.

the javascript dying when trying call plupload stuff in the script hadn't had chance included yet.


Comments

Post a Comment

Popular posts from this blog

c# - SVN Error : "svnadmin: E205000: Too many arguments" -

-
i trying reposotries using c# code process svncommand = null; var psi = new processstartinfo("svnadmin"); psi.redirectstandardoutput = true; psi.redirectstandarderror = true; psi.useshellexecute = false; psi.arguments= @"dump c:\repositories\myrepo > c:\temp\myrepodumpfile.dump"; using (svncommand = process.start(psi)) { var myoutput = svncommand.standardoutput; var myerror = svncommand.standarderror; debug.write("output :" + environment.newline + environment.newline + myoutput.readtoend() + environment.newline + "error :" + environment.newline + environment.newline + myerror.readtoend()); svncommand.close(); } when use dump command commandline svnadmin dump c:\repositories\myrepo > c:\temp\myrepodumpfile.dump it works fine when try ...
Read more

c# - Copy ObservableCollection to another ObservableCollection -

-
how copy observablecollection item observablecollection without reference of first collection? here observablecollection item value changes affecting both collections. code private observablecollection<ratemodel> _allmetalrate = new observablecollection<ratemodel>(); private observablecollection<ratemodel> _metalrateondate = new observablecollection<ratemodel>(); public observablecollection<ratemodel> allmetalrate { { return this._allmetalrate; } set { this._allmetalrate = value; notifypropertychanged("metalrate"); } } public observablecollection<ratemodel> metalrateondate { { return this._metalrateondate; } set { this._metalrateondate = value; notifypropertychanged("metalrateondate"); } } foreach (var item in metalrateondate) allmetalrate.add(item); what causing , how can solve it? you need clone object referenced item before it's a...
Read more

All overlapping substrings matching a java regex -

-
is there api method returns (possibly overlapping) substrings match regular expression? for example, have text string: string t = 04/31 412-555-1235; , , have pattern: pattern p = new pattern("\\d\\d+"); matches strings of 2 or more characters. the matches are: 04, 31, 412, 555, 1235. how overlapping matches? i want code return: 04, 31, 41, 412, 12, 55, 555, 55, 12, 123, 1235, 23, 235, 35. theoretically should possible -- there obvious o(n^2) algorithm enumerates , checks substrings against pattern. edit rather enumerating substrings, safer use region(int start, int end) method in matcher . checking pattern against separate, extracted substring might change result of match (e.g. if there non-capturing group or word boundary check @ start/end of pattern). edit 2 actually, it's unclear whether region() expect zero-width matches. specification vague, , experiments yield disappointing results. for example: string line = "xx90xx"; strin...
Read more