Dropzone 在 AngularJS ng-view 中使用时变为非活动状态答案

【问题标题】：Dropzone becomes inactive when used in AngularJS ng-viewDropzone 在 AngularJS ng-view 中使用时变为非活动状态
【发布时间】：2015-05-19 06:18:03
【问题描述】：

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

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

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

指令如下：

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

    }

}());

【问题讨论】：

标签： angularjs angularjs-directive dropzone.js

【解决方案1】：

找到我自己的答案。我没有将硬编码的 dropzone 添加到模板中，而是使用以下方式以编程方式在控制器范围函数中添加了 dropzone：

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

【讨论】：