Question

晕，我试图在将文档拖到我的屏幕后显示自定义视图，我的代码可以正常工作，但没有错误，但是问题是我无法进行任何更新，直到将页面重定向到其他页面后再拖一个文件。如果文档被拖动并且我的代码在其他模块中正常工作，我将页面重定向到其他页面，但是我不明白为什么在该模块中直到页面重定向后它才响应....

<div ngf-drop ngf-select ng-model="files" ngf-multiple="true" ngf-allow-dir="true" ng-if="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>




       $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);
        });
    };
    function isFile(evt) {
    var dt = evt.dataTransfer;

    for (var i = 0; i < dt.types.length; i++) {
        if (dt.types[i] === "Files") {
            return true;
        }
    }
    return false;
}

在我编写此代码时，该代码在其他模块中也可以使用，但是在该模块中，它仅在页面开始重定向到其他页面后才起作用。有什么帮助让ng-if响应吗？

Answer 1

您添加了自定义事件侦听器，Angularjs不会对其进行跟踪。为了使其正常工作，您必须使用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;
        });
    });

这是关于great article的内部角度及其工作原理的说明。

Angularjs ng-if页面刷新后首先工作？

1 个答案: