在AngularJS ng-view中使用时，dropzone变为非活动状态 [英] 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"});

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