2016-04-28 3 views
0

Новое угловое. Я заимствовал код для директивы 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, директивы и контроллера приведен ниже. Заранее спасибо.директива dropzone не работает

Директива код

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

+0

Что ошибка? – aseferov

+0

@aseferov Я добавил изображение описания ошибки в сообщение! – maxwellgover

ответ

0

»Failed to load resources: 404 error code , Убедитесь, что у вас есть эти файлы в папке bower_components.

Вы можете выполнить следующую команду, чтобы использовать Dropzone в проекте:

bower install ngdropzone --save

Смежные вопросы