Angularjs ng-if Работать первым после обновления страницы?

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;
        });
    });

Вот отличная статья об угловых внутренних элементахи как это работает.