dropzone指令不起作用答案

【问题标题】：dropzone directive not workingdropzone指令不起作用
【发布时间】：2016-04-28 16:34:01
【问题描述】：

Angular 新手。我借用了 dropzone 指令的代码。它不起作用，我不确定为什么。我已将<script src="bower_components/dropzone/dist/min/dropzone.min.js"></script> 以及<script src="scripts/controllers/upload.js"></script> 和<script src="scripts/directives/dropzone.js"></script> 添加到我的索引文件中。我还向控制器添加了 Dropbox 依赖项。我的 HTML、指令和控制器的代码如下。提前致谢。

指令代码

angular.module('nimbusApp')
 .directive('dropzone', function () {
    return {
      template: '<div></div>',
      restrict: 'E',
      link: function postLink(scope, element, attrs) {

      var config, dropzone;

      config = scope[attrs.dropzone];

      // create a Dropzone for the element with the given options
      dropzone = new Dropzone(element[0], config.options);

      // bind the given event handlers
      angular.forEach(config.eventHandlers, function (handler, event) {
        dropzone.on(event, handler);
      });
    }
  };
});

控制器代码

angular.module('nimbusApp')
 .controller('UploadCtrl', function ($scope) {
   $scope.dropzoneConfig = {
   'options': { // passed into the Dropzone constructor
     'url': 'upload.php'
    },
   'eventHandlers': {
     'sending': function (file, xhr, formData) {
    },
     'success': function (file, response) {
    }
  }
};

  $scope.awesomeThings = [
    'HTML5 Boilerplate',
    'AngularJS',
    'Karma',
    'dropzone'
  ];
});

HTML

<div class="container-fluid">
    <div class="row">
        <div class="col-md-12" ng-controller="UploadCtrl">
            <form dropzone="dropzoneConfig" action="/file-upload" class="dropzone" id="my-awesome-dropzone"></form>
        </div>
        <div class="col-md-12">
            <h3 class="text-center upload-heading">Available Tracks</h3>
            <p class="text-center">Sub-heading</p>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <table class="table">
                <tr>
                    <th>#</th>
                    <th>Track Name</th>
                    <th>Track Duration</th>
                    <th>Options</th>
                </tr>
                <tr>
                    <td>1</td>
                    <td>Track 1</td>
                    <td>3:00</td>
                    <td><button class="btn btn-danger">Delete</button></td>
                </tr>
                 <tr>
                    <td>2</td>
                    <td>Track 2</td>
                    <td>3:20</td>
                    <td><button class="btn btn-danger">Delete</button></td>
                </tr>
            </table>
        </div>
    </div>
</div>`

error description

【问题讨论】：

@aseferov 我在帖子中添加了错误描述的图片！

标签： angularjs dropzone.js

【解决方案1】：

”Failed to load resources: 404 error code”。请确保您在bower_components 文件夹中有这些文件。

您可以运行以下命令以在您的项目中使用 dropzone：

bower install ngdropzone --save

【讨论】：