AngularJS ng-if does not work in all modules? - html

Question

I am trying to show/hide my drag and drop when a document comes to the screen. I used AngularJS and it worked. However, it does not work in all modules. Although I same always the same code but from other modules :
working code :
<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>
And in 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);
});
};
And the code that is not working:
<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>
Which is the same ....
Are there any tips that I should do for making it work in all modules?

Answer 1

the answer was that i showld apply the scope to event listener cause i added custom event listeners, which are not tracked by Angularjs. In order to make it work applying 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;
});
});