ry8806

<div id="jquery_jplayer_1" class="jp-jplayer"></div>
<div id="jp_container_1" class="jp-audio" role="application" aria-label="media player">
	<div class="jp-type-single">
		<div class="jp-gui jp-interface">
			<div class="jp-volume-controls">
				<button class="jp-mute" role="button" tabindex="0">mute</button>
				<button class="jp-volume-max" role="button" tabindex="0">max volume</button>
				<div class="jp-volume-bar">
					<div class="jp-volume-bar-value"></div>
				</div>

ry8806

myApp.directive("jplayer", ['$window', 'PlayerService', function ($window, PlayerService) {
    return {
        restrict: "E",
        // Have our own scope - we only want to watch the service and not conflict with other scopes
        scope: {},
        // Serve up some html with our player
        templateUrl: "/jplayer-template.html",
        link: function (scope, element, attrs) {
            // An element on the page to attach the jPlayer to. Could also use "element" from linkFN ^
            var jPlayer = angular.element("#jquery_jplayer_1").jPlayer();