Dropzone becomes inactive when used in AngularJS n

问题:

I have a controller that displays images via a template that is passed through ng-view and runs smoothly. I also have dropzone up and running and working smoothly. However, as soon as I add dropzone to the template the dropzone is no longer active. It displays (the zone isn't clickable unless I manually add dz-clickable, but still does nothing).

I could add the dropzone in a ng-include above the area and have it hidden when the template is looking elsewhere but have heard that ng-include uses more processor than ng-view so would prefer to keep it all together.

I have seen that there is a dropzone angularjs directive but have not managed to merge it successfully with my controller that gets placed into the ng-view or if that would even be successful?

Here is the directive:

(function(){

  angular.module('dropZone', [])
  .directive('dropZone', function() {

    return function(scope, element, attrs) {

      element.dropzone({ 
        url: "/upload",
        maxFilesize: 100,
        paramName: "uploadfile",
        maxThumbnailFilesize: 5,
        init: function() {
          scope.files.push({file: 'added'}); // here works
          this.on('success', function(file, json) {
          });

          this.on('addedfile', function(file) {
            scope.$apply(function(){
              alert(file);
              scope.files.push({file: 'added'});
            });
          });

          this.on('drop', function(file) {
            alert('file');
          });
        }
      });

    }
  });

}());

and here is my current controller:

(function() {
    'use strict';

    angular
    .module('app')
    .controller('CustomController', CustomController);

    CustomController.$inject = ['api'];

    function CustomController(api) {
        var vm = this;

        api.getDesigns()
            .then(function(data) {
                vm.designs = data;
            });

    }

}());

回答1:

Found my own answer. Rather than adding the dropzone hard coded into the template I just programmatically added the dropzone within the controller scope function using :

   var myDropzone = new Dropzone("div#myId", { url: "/file/post"});