/ / AngularJS Jak oglądać przesunięte górne położenie elementów? - angularjs, angularjs-directive

AngularJS Jak oglądać przesunięte górne położenie elementów? - angularjs, angularjs-directive

Jak oglądać przesunięcie górnej pozycji (każdego z nichelement) i jeśli odległość od górnej granicy ekranu jest mniejsza niż 100 pikseli, muszę ukryć ten element div. (każdy div może się poruszać na stronie). Pomóż proszę napisać dyrektywę kątową.

Nie mogę oglądać każdego przesunięcia górnego elementu.

var app = angular.module("app", []);

app.app.directive("blah", function() {
return {
restrict: "A",
link: function(scope, element) {
element.show();
scope.$watch(function() {
return element.offset().top > 120
}, function(outOfBorder) {
if (outOfBorder) {
element.hide()
console.log(outOfBorder)
} else {
element.show()
console.log(outOfBorder)
}
});
}
}
});
.all {
height: 100px;
width: 300px;
border:1px solid;
overflow: scroll;
}
.elements {
height: 30px;
width: 300px;
border:1px solid red;
float: left;
clear: both;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div class="all" ng-app="app">
<div class="elements" blah></div>
<div class="elements" blah></div>
<div class="elements" blah></div>
<div class="elements" blah></div>
<div class="elements" blah></div>
<div class="elements" blah></div>
<div class="elements" blah></div>
<div class="elements" blah></div>
</div>

Odpowiedzi:

2 dla odpowiedzi № 1

Po prostu dodajesz watcher z funkcją (nie testowałem + prawdopodobnie potrzebuję jakiejś zmiany nazwy):

angular.module("blah").directive("blah", function() {
return {
restrict: "A",
link: function(scope, element) {
scope.$watch(function() {
return element.offset().top < 100
}, function(outOfBorder) {
if (outOfBorder) {
element.hide()
} else {
element.show()
}
});
}
}
});

Powodem, dla którego Twój kod nie działa, jest wartość przekazana do a $watch jest oceniany wcześniej $watch jest wykonywany. W rezultacie oglądasz największe przesunięcie na elemencie w chwili wykonania łącza - jest to stała liczba.

EDYTOWAĆ:

Jeśli twoje elementy nie są ustawione absolutnie, wywołanie hide spowoduje, że wszystkie pozostałe elementy zostaną przesunięte w górę, co ostatecznie spowoduje ukrycie wszystkich elementów. W tym przypadku użyj element.addClass("invisible") i element.removeClass("invisible") zamiast ukrywać i pokazywać i definiować klasę css jako:

.invisible { visibility: hidden; }

Zmieniona widoczność nie wpłynie na pozycję innego elementu.