Angularjs jQuery 文件上传

Question

我是 Angularjs 的新手，我正在尝试使用 jQuery File Upload 创建一个 AngularJS 项目，但我无法区分指令文件控制器文件和视图。

任何人都可以通过向我提供文件应如何放置的清晰结构来帮助我吗？ （控制器、指令和视图）

Answer 1

我为我的第一个 Angular.js 项目写了一些东西。它来自之前有一个 Angular.js 示例，但如果你想看到困难的方式，你可以拥有它。这不是最好的，但它可能是您开始的好地方。这是我的directions.js 文件。

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

我没有为控制器做任何特别的事情。唯一重要的观点是：

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