Question

当文档进入屏幕时，我试图显示/隐藏我的拖放。我使用了AngularJS，它起作用了。但是，它不适用于所有模块。虽然我总是相同的代码，但是来自其他模块：

工作代码：

<div ngf-drop ngf-select ng-model="files" ngf-multiple="true" ngf-allow-dir="true" ng-show="dropIsVisible === true">
    <div class="drop-area-full-page">
        <div class="drop-area-full-page__graphic"></div>
        <div class="drop-area-full-page__info" id="drop-area-full-page__info" ng-bind-html="dropText"></div>
    </div>
    </div>

在AngularJS中：

$window.addEventListener("dragenter", function (e) {
    if (isFile(e)) {
        lastTarget = e.target;
        $scope.dropIsVisible = true;   
        name = getName($scope, getParent());                     
        $scope.dropText =
            "<b> Dokument ablegen zu </b>" + "<b>" + name+ "</b>";
    }
});

$window.addEventListener("dragleave", function (e) {
    e.preventDefault();
    if (e.target === document || e.target === lastTarget) {
        $scope.dropIsVisible = false;        

    }
});

$window.addEventListener("dragover", function (e) {
    e.preventDefault();
    $scope.dropIsVisible = true;
});
function getParent() {
    return {
        entityName: $stateParams.entity,
        id: $scope.parentId
    };
}

$window.addEventListener("drop", function (e) {
    e.preventDefault();
    $scope.dropIsVisible = true;           
    var qs = e.dataTransfer.files[0].name;
    var parent = getParent();
    DokumentUploadMixin.Prepare(qs, e.dataTransfer.files[0], $scope, parent, projection, qs);
    //$window.location.href = routeUtils.getCreateDokumentUrl("Dokument", getParent(), projection, qs);
});

};

和无效的代码：

<div ngf-drop ngf-select ng-model="files" ngf-multiple="true" ngf-allow-dir="true" ng-show="dropIsVisible === true">
    <div class="drop-area-full-page">
        <div class="drop-area-full-page__graphic"></div>
        <div class="drop-area-full-page__info" id="drop-area-full-page__info" ng-bind-html="dropText"></div>
    </div>
</div>

哪个是相同的...。使它在所有模块中都能正常工作吗？

Answer 1

答案是，我将范围应用到事件侦听器，因为我添加了自定义事件侦听器，而Angularjs并未对其进行跟踪。为了使它能正常工作，在$ Event中使用addEventListener回调与$ scope。$ apply告诉角度更新模型。

   $window.addEventListener("dragenter", function (e) {
        $scope.$apply(function() {
            if (isFile(e)) {
                lastTarget = e.target;
                $scope.dropIsVisible = true;   
                name = getName($scope, getParent());                     
                $scope.dropText =
                    "<b> Dokument ablegen zu </b>" + "<b>" + name+ "</b>";
            }
        });
    });

    $window.addEventListener("dragleave", function (e) {
        $scope.$apply(function() {
            e.preventDefault();
            if (e.target === document || e.target === lastTarget) {
                $scope.dropIsVisible = false;        
            }
        });
    });

    $window.addEventListener("dragover", function (e) {
        $scope.$apply(function() {
           e.preventDefault();
           $scope.dropIsVisible = true;
        });
    });

AngularJS ng-if是否不能在所有模块中使用？

1 个答案: