StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>I wrote something for my very first Angular.js project. It's from before there was an Angular.js example, but if you want to see the hard way, you can have it. It's not the best, but it may be a good place for you to start. This is my directives.js file.</p> <pre><code>(function(angular){ 'use strict'; var directives = angular.module('appName.directives', []); directives.directive('imageUploader', [ function imageUploader() { return { restrict: 'A', link : function(scope, elem, attr, ctrl) { var $imgDiv = $('.uploaded-image') , $elem , $status = elem.next('.progress') , $progressBar = $status.find('.bar') , config = { dataType : 'json', start : function(e) { $elem = $(e.target); $elem.hide(); $status.removeClass('hide'); $progressBar.text('Uploading...'); }, done : function(e, data) { var url = data.result.url; $('<img />').attr('src', url).appendTo($imgDiv.removeClass('hide')); scope.$apply(function() { scope.pick.photo = url; }) console.log(scope); console.log($status); $status.removeClass('progress-striped progress-warning active').addClass('progress-success'); $progressBar.text('Done'); }, progress : function(e, data) { var progress = parseInt(data.loaded / data.total * 100, 10); $progressBar.css('width', progress + '%'); if (progress === 100) { $status.addClass('progress-warning'); $progressBar.text('Processing...'); } }, error : function(resp, er, msg) { $elem.show(); $status.removeClass('active progress-warning progress-striped').addClass('progress-danger'); $progressBar.css('width', '100%'); if (resp.status === 415) { $progressBar.text(msg); } else { $progressBar.text('There was an error. Please try again.'); } } }; elem.fileupload(config); } } } ]); })(window.angular) </code></pre> <p>I didn't do anything special for the controller. The only part of the view that matters is this:</p> <pre><code> <div class="control-group" data-ng-class="{ 'error' : errors.image }"> <label class="control-label">Upload Picture</label> <div class="controls"> <input type="file" name="files[]" data-url="/uploader" image-uploader> <div class="progress progress-striped active hide"> <div class="bar"></div> </div> <div class="uploaded-image hide"></div> </div> </div> </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload