Question

新角度。我借用了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

Answer 1

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

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

bower install ngdropzone --save

dropzone指令不起作用

1 个答案: