Question

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

我可以在区域上方的ng-include中添加dropzone，并在模板查找其他地方时隐藏它，但是听说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;
            });

    }

}());

Answer 1

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

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

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

1 个答案: