2016-04-28 131 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文件夾中有這些文件。

你可能爲了在項目中使用懸浮窗運行下面的命令:

bower install ngdropzone --save