Question

我正在尝试绑定变量以检测dropzone队列的上传进度但由于某种原因我的控制变量$scope.dropzone.sFileUploading在我更改它时跳出了上下文而角度没有更新模板

这是我的控制器：

angular.module('DBDescriptorApp')
.controller('DesignerController', ['$scope', '$rootScope', 'user',
    function($scope, $rootScope, user) {

        $rootScope.currentNav   = 'designer';
        $rootScope.currentUser  = user.data;

        $scope.$watch('dropzone', function (value) {
            if(value != undefined) {

                $scope.dropzone.sFileUploading = false;

                $scope.dropzone.on('addedfile', function(file) {
                    $scope.dropzone.sFileUploading = true;
                });

            }
        });

        $scope.dropzoneConfig = {
            url             : 'dropzone',
            parallelUploads : 3,
            uploadMultiple  : true,
            maxFileSize     : 30,
            addRemoveLinks  : 'dictCancelUpload'
        };

    }]);

这是我的模板：

<div ng-include="'dist/templates/header.html'"></div>

<div class="container-fluid">

    <div class="row-fluid">
        <div class="col-md-12">
            DESGINER

            <hr/>

            <form class="dropzone" method="post" enctype="multipart/form-data" ng-dropzone dropzone="dropzone" dropzone-config="dropzoneConfig">

            </form>

            <div ng-show="dropzone.sFileUploading">UPLOADING!</div>

        </div>
    </div>

</div>

Answer 1

我设法使用$ apply（）更新范围，并将所有内容放在init中作为Dropzone文档建议，这里是代码：

$scope.dropzoneConfig = {
            init            : function() {
                this.on('addedfile', function() {
                    $scope.$apply(function() {
                        $scope.filesUploading = true;
                    });
                });
            },
            url             : 'dropzone',
            parallelUploads : 3,
            uploadMultiple  : true,
            maxFileSize     : 30,
            addRemoveLinks  : 'dictCancelUpload'
        };

Angularjs dropzone，变异脱离背景

1 个答案: