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>`
什麼錯誤? – aseferov
@aseferov我在帖子中添加了錯誤描述的圖片! – maxwellgover