/ / Como ng-show elemento no scroll quando está em exibição no Angular JS - javascript, angularjs

Como ng-show elemento na rolagem quando está em exibição no Angular JS - javascript, angularjs

Esse é o meu código e não funciona. O que há de errado com isso?

HTML

<i ng-show="whenIconsIntoView()" class="fa fa-mail"></i>

JS

app.controller("AboutCtrl", ["$scope", "$window", function($scope, $window){
// some function to detect is scroll into user"s view
isScrolledIntoView = function(elem) {...}

$window.onscroll = function() {
$scope.whenIconsIntoView = function(){
$scope.$apply(function() {
return isScrolledIntoView(".icons");
});
};
};
}]);

Respostas:

0 para resposta № 1

Experimente por um código de maneira mais angular

app.controller("AboutCtrl", ["$scope", function($scope, $window) {
// some function to detect is scroll into user"s view
isScrolledIntoView = function(elem) {...
}

$window[0].on("scroll", function() {
$scope.whenIconsIntoView = function() {
$scope.$apply(function() { //need to run digest cycle from events
return (isScrolledIntoView(".icons")) ? true : false;
});
};
});
}]);

E eu gostaria de sugerir que você não jogue com o DOM do controlador angular, acho que a diretiva seria a melhor maneira de isso isScrolledIntoView = function(elem) {...} função está fazendo.


-1 para resposta № 2

Você pode adicionar um ouvinte de evento no seu arquivo JS paraouça a posição desse ID. Em outras palavras, você provavelmente precisará criar uma diretiva anexada à coisa que deseja exibir, e nessa diretiva você deseja ter a posição sempre enviando. Portanto, use jquery em uma nova diretiva e faça ping é posição, então se a posição disso é um valor que está no bingo do monitor.

Em outras palavras, se o seu monitor tiver 1000 px de altura,e seu elemento estiver 1400px abaixo, você rolar 400px para baixo, o jquery reconhecerá que a altura de rolagem da janela foi alterada e poderá disparar uma função.

Não quero fornecer o código, mas um entendimento de alto nível. Isso ajuda?

$("#scrollid").scroll(function(){
// get current window height
//then get id position on page
// if window scroll overlaps with id position, set display:bock or whatever
})