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

Question

你好，我试图在将文档拖到屏幕上后显示客户 View ，我的代码运行正常，没有错误，但问题是在拖动文件后页面重定向到其他页面之前我无法进行任何更新。 如果文档被拖动并且我的代码在其他模块中正常工作，我会将我的页面重定向到其他页面，但我不明白为什么在这个模块中它直到页面重定向才响应......

<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 不会跟踪这些监听器。为了使其工作，您必须使用 $scope.$apply 覆盖 addEventListener 回调中的所有内容，以告诉 Angular 更新模型。

   $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关于 Angular 内部结构及其工作原理。