bennadel/directive-repaint.htm

## directive-repaint.htm
<!doctype html>
<html ng-app="Demo" ng-controller="DemoController">
<head>
	<meta charset="utf-8" />

	<title>
		Forced Repaints In Directive Can Cause Accidental Scrolling In AngularJS
	</title>
</head>
<body>

	<h1>
		Forced Repaints In Directive Can Cause Accidental Scrolling In AngularJS
	</h1>


	<!-- BEGIN: Tabbed Interface. -->
	<div class="tabbed">

		<div class="tabs">
			<a ng-click="showTab( 'A' )">Show Tab A</a>
			<a ng-click="showTab( 'B' )">Show Tab B</a>
		</div>

		<hr />

		<!-- BEGIN: Tab Panes. -->
		<div class="panes" ng-switch="activePane">

			<!-- Tab with "helper" directive. -->
			<div ng-switch-when="A" bn-tab-helper>

				<h3>
					Pane A
				</h3>

				<ol>
					<li ng-repeat="friend in friends">
						{{ friend }}
					</li>
				</ol>

			</div>

			<!-- Tab with "helper" directive. -->
			<div ng-switch-when="B" bn-tab-helper>

				<h3>
					Pane B
				</h3>

				<ul>
					<li ng-repeat="friend in friends">
						{{ friend }}
					</li>
				</ul>

			</div>

		</div>
		<!-- END: Tab Panes. -->

	</div>
	<!-- END: Tabbed Interface. -->


	<!-- Load jQuery and AngularJS from the CDN. -->
	<script
		type="text/javascript"
		src="//code.jquery.com/jquery-2.0.0.min.js">
	</script>
	<script
		type="text/javascript"
		src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js">
	</script>
	<script type="text/javascript">


		// Create an application module for our demo.
		var Demo = angular.module( "Demo", [] );


		// -------------------------------------------------- //
		// -------------------------------------------------- //


		// I am the controller for Demo.
		Demo.controller(
			"DemoController",
			function( $scope ) {


				// I define the active tab pane.
				$scope.showTab = function( whichTab ) {

					$scope.activePane = whichTab;

				};

				// I hold the active tab pane.
				$scope.activePane = "A";

				// I am the list of friends to render.
				$scope.friends = [
					"Sarah", "Joanna", "Kim", "Lisa", "Tricia",
					"Anna", "Francis", "Rebbecca", "Nicole", "Kit",
					"Pam", "Christina", "Sonia", "Alex"
				];

			}
		);


		// -------------------------------------------------- //
		// -------------------------------------------------- //


		// I force a repaint in the link phase (accidentally).
		Demo.directive(
			"bnTabHelper",
			function( $timeout ) {

				// I bind the DOM events to the scope.
				function link( $scope, element, attributes ) {

					// Getting the width of the element forces the
					// browser to repaint the UI; this, accidentally
					// causes the window to scroll to the top because
					// the repaint happens BEFORE the nested list has
					// a chance to react to the changing model in
					// the ngRepeat directive.
					console.log( "Pane Width:", element.width() );

					var list = element.find( "ol, ul" );

					// Show the currently-rendered friends.
					console.log( "Friends:", list.children() );

					// Show the list on next tick.
					$timeout(
						function() {

							console.log( "Timeout:", list.children() );

						}
					);

				}

				// Return the directive configuration.
				return({
					link: link,
					restrict: "A"
				});

			}
		);


	</script>

</body>
</html>
	<!doctype html>
	<html ng-app="Demo" ng-controller="DemoController">
	<head>
	<meta charset="utf-8" />

	<title>
	Forced Repaints In Directive Can Cause Accidental Scrolling In AngularJS
	</title>
	</head>
	<body>

	<h1>
	Forced Repaints In Directive Can Cause Accidental Scrolling In AngularJS
	</h1>


	<!-- BEGIN: Tabbed Interface. -->
	<div class="tabbed">

	<div class="tabs">
	<a ng-click="showTab( 'A' )">Show Tab A</a>
	<a ng-click="showTab( 'B' )">Show Tab B</a>
	</div>

	<hr />

	<!-- BEGIN: Tab Panes. -->
	<div class="panes" ng-switch="activePane">

	<!-- Tab with "helper" directive. -->
	<div ng-switch-when="A" bn-tab-helper>

	<h3>
	Pane A
	</h3>

	<ol>
	<li ng-repeat="friend in friends">
	{{ friend }}
	</li>
	</ol>

	</div>

	<!-- Tab with "helper" directive. -->
	<div ng-switch-when="B" bn-tab-helper>

	<h3>
	Pane B
	</h3>

	<ul>
	<li ng-repeat="friend in friends">
	{{ friend }}
	</li>
	</ul>

	</div>

	</div>
	<!-- END: Tab Panes. -->

	</div>
	<!-- END: Tabbed Interface. -->



	<!-- Load jQuery and AngularJS from the CDN. -->
	<script
	type="text/javascript"
	src="//code.jquery.com/jquery-2.0.0.min.js">
	</script>
	<script
	type="text/javascript"
	src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js">
	</script>
	<script type="text/javascript">


	// Create an application module for our demo.
	var Demo = angular.module( "Demo", [] );


	// -------------------------------------------------- //
	// -------------------------------------------------- //


	// I am the controller for Demo.
	Demo.controller(
	"DemoController",
	function( $scope ) {


	// I define the active tab pane.
	$scope.showTab = function( whichTab ) {

	$scope.activePane = whichTab;

	};

	// I hold the active tab pane.
	$scope.activePane = "A";

	// I am the list of friends to render.
	$scope.friends = [
	"Sarah", "Joanna", "Kim", "Lisa", "Tricia",
	"Anna", "Francis", "Rebbecca", "Nicole", "Kit",
	"Pam", "Christina", "Sonia", "Alex"
	];

	}
	);


	// -------------------------------------------------- //
	// -------------------------------------------------- //


	// I force a repaint in the link phase (accidentally).
	Demo.directive(
	"bnTabHelper",
	function( $timeout ) {

	// I bind the DOM events to the scope.
	function link( $scope, element, attributes ) {

	// Getting the width of the element forces the
	// browser to repaint the UI; this, accidentally
	// causes the window to scroll to the top because
	// the repaint happens BEFORE the nested list has
	// a chance to react to the changing model in
	// the ngRepeat directive.
	console.log( "Pane Width:", element.width() );

	var list = element.find( "ol, ul" );

	// Show the currently-rendered friends.
	console.log( "Friends:", list.children() );

	// Show the list on next tick.
	$timeout(
	function() {

	console.log( "Timeout:", list.children() );

	}
	);

	}

	// Return the directive configuration.
	return({
	link: link,
	restrict: "A"
	});

	}
	);


	</script>

	</body>
	</html>