AngularJS установить элементу класс, если он скрыт за границами другого блока

#javascript #angularjs

Есть у меня блок, внутри которого элементы выводятся в ng-repeat. Если элемент (class="item")
частично или полностью (при склоре блока) выходит за его границы, этому элементу мне
нужно установить класс например "novisible".

Еще раз, что мне нужно. Пользователь прокручивает родительский блок, все дочерние
элементы (div class="item"), которые за границей видимости, должны получить класс "novisible".



.item {
height:30px;
border: 1px solid #ff0000;
}

  
    
item
    
item
    
item
    
item
    
item
    
item
    
item
    
item
    
item
    
item
    
item
    
item
      
item
    
item
    
item
    
item
    
item
    
item
    
item
    
item
    
item
    
item
    
item
    
item
      
item
    
item
    
item
    
item
    
item
    
item
    
item
    
item
    
item
    
item
    
item
    
item




    

Ответы

Ответ 1

Оборачивайте весь блок в директиву, а далее работайте с DOM и её event'ами (scroll)
+ addClass/removeClass (ng-class, если больше нравится).

При первом старте, чтобы дождаться когда ng-repeat отработает, можно использовать
решение наподобие такого:
https://stackoverflow.com/questions/15207788/calling-a-function-when-ng-repeat-has-finished


Ответ 2

var Model = (function(){
var allItems = [];

for(var i = 0; i < 20; i++){
	allItems.push({name: 'item-' + i });
}

return {
	getAllItems: function(){
		return allItems;
	}
};
})();

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


app.controller('ItemController', ['$scope', function($scope){
$scope.model = Model.getAllItems();
}]);

app.directive('customScroll', ['$injector', function(){
// Runs during compile
return {
	link: function($scope, iElm, iAttrs, controller) {
		var dataCollection = $scope[iAttrs['customScroll']];
		var length = dataCollection.length;
		var element;
		
		for(var i = 0; i < length; i++){
			element = angular.element('
' + dataCollection[i].name + '
');
			iElm.append(element);
		}

		// а вот теперь делайте все так же, как я показал Вам раньше.
		// Но если со временем появятся ошибки при скроле, то напишите о них,
		// мне самому интересно.
		
		iElm[0].addEventListener('scroll', iElem_scrollHandler);

		function iElem_scrollHandler(event){
			var allChildren = event.target.children;
			var length = allChildren.length;
			var item;

			for(var i = 0; i < length; i++){
				item = allChildren[i];

				if(item.getBoundingClientRect().y > 0){
					if(false /*что-то тут*/){
						/*что-то делаем*/
					}else{
						break;
					}
				}

				/*оффаем*/
			}
		}
	}
};
}]);
.item {
	height:30px;
	border: 1px solid #ff0000;
}