Memoris.controller('Flats', ['$scope', '$http',Flats]) .directive('dropzone', ['$location', '$http', dropzone]); Memoris.controller('Tours', ['$scope', '$http', '$routeParams',Tours]) .directive('dropzone', ['$location', '$http', dropzone])

Directive itself

 function dropzone($location, $http) { return { restrict: 'C', link: function (scope, element, attrs) { var config = { url: 'tour/add-tour', maxFilesize: 100, paramName: "file", maxFiles: 10, maxThumbnailFilesize: 100, parallelUploads: 50, autoProcessQueue: false, autoDiscover: false, uploadMultiple: true, addRemoveLinks: true, params: scope.formData, dictDefaultMessage: "Перетащите фото", init: function () { var self = this; setTimeout(function () { if (scope.formData.img) { scope.imgFromServer = true; } $.each(scope.formData.img, function (i, v) { var mockFile = {name: v}; self.emit("addedfile", mockFile); self.emit("thumbnail", mockFile, "/images/" + v); self.emit("complete", mockFile); }); }, 1000); } }; scope.files = []; var eventHandlers = { 'addedfile': function (file) { scope.file = file; if (file.status == 'added') { scope.newfile = true; } else { scope.files.push(file.name); } scope.$apply(function () { scope.fileAdded = true; }); }, 'removedfile': function (file) { var index = scope.files.indexOf(file.name); scope.files.splice(index, 1); }, 'queuecomplete': function (e) { if (!scope.imgFromServer) { scope.formData = {}; scope.$apply(); dropzone.removeAllFiles(); } }, 'error': function (file, response) { } }; dropzone = new Dropzone(element[0], config); angular.forEach(eventHandlers, function (handler, event) { dropzone.on(event, handler); }); scope.resetDropzone = function () { dropzone.removeAllFiles(); scope.formData = {}; }; scope.updateTour = function () { scope.formData.img = scope.files; $http({ url: "/tour/update-tour", method: "POST", data: scope.formData }).success(function (data) { //console.log($scope.formData); }).error(function (data, status, headers, config) { scope.status = status; }); }; scope.updateTourWithNewPhoto = function () { dropzone.options.url = 'tour/update-tour-with-new-photo'; scope.formData.img = scope.files dropzone.options.params = scope.formData; dropzone.processQueue(); }; scope.addTour = function () { dropzone.options.params = scope.formData; dropzone.processQueue(); } } } }

I want to use the dropzone directive several times, but I get an error

Dropzone already attached.

  • Well, and what prevents to use it twice? The directive function - creates a directive - why do you want to create it several times. if you need to use it? - Grundy
  • Show an example please! - ruslik
  • delete the second call .directive('dropzone', ['$location', '$http', dropzone]) and it will work - Grundy
  • I need the directive to be visible from different controllers - ruslik
  • The directive is not related to the controllers. Moreover, the controller does not have access to the directive, no - Grundy

1 answer 1

Directives in AngularJs are connected to the module and only to it. Good practice to create a module for a directive:

 angular.module('my-directive', []).directive('myDirective', [funciton(){..}]);

In the module where you need to connect it, we simply transfer it as a dependency:

 var pageApp = angular.module('page-app', ['my-directive']);