directive-referencing-attributes.js

"use strict";

app.directive( "invScreenUploader", function() {
		
	function link( scope, element, attrs ){

                // URL is undefined initially but eventually gets defined
		console.log( attrs.url );

                // These get defined in immediately
		console.log( attrs.id );
		console.log( attrs.buttonId );
		console.log( attrs.hoverClass );

                // Logs the URL correctly
		$timeout(function(){	
			console.log( attrs.url );	
		},3000);

	}

	return {
		restrict: 'A',
		scope: true,
		link: link
	};
}
);

directive-referencing-scope.js

"use strict";

app.directive( "invScreenUploader", function() {
		
	function link( scope, element, attrs ){

                // All of the following are undefined
		console.log( scope.url );
		console.log( scope.id );
		console.log( scope.buttonId );
		console.log( scope.hoverClass );

                // Logs the variables correctly correctly
		$timeout(function(){	
			console.log( scope.url );
			console.log( scope.id );
			console.log( scope.buttonId );
			console.log( scope.hoverClass );
		},3000);

	}

	return {
		restrict: 'A',
		scope: {
 			id: "@",
			url: "@",
			hoverClass: "@",
			buttonId: "@"
                },
		link: link
	};
}
);

screens.html

<div inv-screen-uploader 
	id="screenUploader" 
	button-id="selectScreen" 
	hover-class="dragHover" 
	url="api/upload_screen.cfm?projectID={{ project.id }}">

	<!-- Drag-n-Drop area for screen uploads -->	
	Uploader

</div>