examples/basic.html

<!DOCTYPE html>
<html xmlns:ng="http://angularjs.org" id="ng-app" ng-app="basicApp">
<head>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>angular-inview basic example</title>
	<style type="text/css">
	#hud {
		background: white;
		border: 1px solid gray;
		bottom: 0;
		margin: 20px;
		min-width: 220px;
		position: fixed;
		right: 0;
		top: 0;
		width: 25%;
		overflow: auto;
	}

	#lines {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	#lines li {
		height: 100px;
	}

	#lines li:nth-child(odd) {
		background-color: lightgray;
	}
	</style>
</head>
<body ng-controller="basicCtrl">

	<div id="hud">
		<ul>
			<li ng-repeat="l in inviewLogs" ng-bind-html="l.message"></li>
		</ul>
	</div>

	<ul id="lines">
		<li ng-repeat="t in testLines" in-view="lineInView($index, $inview, $inviewInfo)" in-view-options="{ generateParts: true }">This is test line #{{$index}}</li>
	</ul>

	<script src="../node_modules/angular/angular.js"></script>
	<script src="../angular-inview.js"></script>
	<script type="text/javascript">
	angular.module('basicApp', ['angular-inview']).controller('basicCtrl', function basicCtrl ($scope, $sce) {
		var logId = 0;
		$scope.testLines = [];
		for (var i = 20; i >= 0; i--) {
			$scope.testLines.push(i);
		};
		$scope.inviewLogs = [];
		$scope.lineInView = function(index, inview, inviewInfo) {
			var inViewReport = inview ? '<strong>enters</strong>' : '<strong>exit</strong>';
			var inviewpart = [];
			for (var p in inviewInfo.parts) {
				if (inviewInfo.parts[p]) {
					inviewpart.push(p);
				}
			}
			inviewpart = inviewpart.length % 4 === 0 ? 'all' : inviewpart.join(', ');
			if (typeof(inviewpart) != 'undefined') {
				inViewReport = '<strong>' + inviewpart + '</strong> parts ' + inViewReport;
			}
			$scope.inviewLogs.unshift({ id: logId++, message: $sce.trustAsHtml('Line <em>#' + index + '</em>: ' + inViewReport) });
			return false;
		}
	});
	</script>
</body>
</html>