Dropzone 在 AngularJS ng-view 中使用时变得不活动 [英] Dropzone becomes inactive when used in AngularJS ng-view

问题描述

我有一个控制器，它通过一个模板显示图像，该模板通过 ng-view 并顺利运行.我也有 dropzone 启动并运行并且工作顺利.但是，一旦我将 dropzone 添加到模板中， dropzone 就不再处于活动状态.它显示(该区域不可点击，除非我手动添加 dz-clickable，但仍然什么都不做).

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).

我可以在区域上方的 ng-include 中添加 dropzone，并在模板查看其他地方时将其隐藏，但听说 ng-include 使用的处理器比 ng-view 多，因此更愿意将它们放在一起.

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.

我已经看到有一个 dropzone angularjs 指令，但没有成功地将它与我的控制器合并，该控制器被放置到 ng-view 中，或者这是否会成功?

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?

这是指令:

(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');
          });
        }
      });

    }
  });

}());

这是我当前的控制器:

(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;
            });

    }

}());

推荐答案

找到了我自己的答案.我没有将 dropzone 硬编码到模板中，而是使用以下命令以编程方式在控制器作用域函数中添加了 dropzone:

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"});

这篇关于Dropzone 在 AngularJS ng-view 中使用时变得不活动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！