Angularjs ng-if Work first after page refresh?

Question

Hallo i am trying to show a custome view after draging document to my screen,my code is working without bugs but the problem i could not have any update until the page redirecting to other page cause after drag a file. i am redirecting my page to other page if document draged and my code worked corectly in other module but i do not get why in this module it does not response until the page is redirecting .....

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

and as i wrote this code worked in other module but in this module it work just after the page start redirecting to other page.... any help to let ng-if respond ?

Answer 1

You added custom event listeners, which are not tracked by Angularjs. In order to make it work you have to cover everything inside addEventListener callback with $scope.$apply to tell angular update the model.

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

Here is a great article about angular internals and how it works.