I'm currently attempting to customize an embedded object using Angular Directive, but I am running into difficulties getting the directive to function correctly.
Here is the code for the object:
<object width="250" height="40">
<param name="movie" value="http://grooveshark.com/songWidget.swf">
<param name="wmode" value="window">
<param name="allowScriptAccess" value="always">
<param name="flashvars" value="hostname=cowbell.grooveshark.com&songIDs=26593443&style=metal&p=0">
<embed src="http://grooveshark.com/songWidget.swf" type="application/x-shockwave-flash" width="250" height="40" flashvars="hostname=cowbell.grooveshark.com&songIDs=26593443&style=metal&p=0" allowscriptaccess="always" wmode="window"/>
</object>
My goal is to dynamically define the song IDs. I have attempted the following:
<object width="250" height="40">
<param name="movie" value="http://grooveshark.com/songWidget.swf">
<param name="wmode" value="window">
<param name="allowScriptAccess" value="always">
<param name="flashvars" value="hostname=cowbell.grooveshark.com&songIDs=" + {{bpmSong[0].$id}} + "&style=metal&p=0">
<embed src="http://grooveshark.com/songWidget.swf" type="application/x-shockwave-flash" width="250" height="40" flashvars="hostname=cowbell.grooveshark.com&songIDs=" + {{bpmSong[0].$id}} + "&style=metal&p=0" allowscriptaccess="always" wmode="window"/>
</object>
In essence, I have a number represented by {{bpmSong[0].$id}}, which I am trying to use as the SongID.
I believe utilizing a directive is the solution I need, but I have been unsuccessful in implementing one successfully.
Any assistance would be greatly appreciated.
UPDATE following @JayMc's suggestion attempt. I also adjusted the src to avoid syntax errors. However, it still doesn't produce the desired outcome.
index.html
<body ng-app="GrooveApp">
<div ng-controller="MainCtrl">
<div class="col-md-12" id="radio">
<button class="btn-lg btn-danger" ng-click="count = count - 1" ng-init="count=0">Previous</button>
<flash-widget songID='{{bpmSong[0].$id}}' ></flash-widget>
<button class="btn-lg btn-danger" ng-click="count = count + 1">Next</button>
</div>
<div class="col-md-12">
{{bpmSong[count].$id}}
</div>
</div>
app.js
angular.module("GrooveApp", ["firebase"])
.controller("MainCtrl", function($scope, $firebase) {
var ref = new Firebase("/bpm_playlist");
var sync = $firebase(ref);
// create a synchronized array for use in our HTML code
$scope.bpmSong = sync.$asArray();
})
.directive('flashWidget', function(){
return {
restrict: 'E',
scope: {
width:'=',
height:'=',
src: '=',
songID: '='
},
template: '<object width="250" height="40">' +
':background真<br>
友達申請承認待ちゴミ。: &:smiley:" />'+':blob-cute: シドラ' +
'バッチャン、Love勝ったキャーイェイ!! :wow:'+':corn ~~サイトア内<em>' +
'<i rel=>:P S}{wi自己RSS</i>RenArubaitoe-mail.jpmail登録メル欄でま'; '<param name="movie" value="http://grooveshark.com/songWidget.swf">'+
'<param name="wmode" value="window">'+
'<param name="allowScriptAccess" value="always">'+
'<param name="flashvars"value="hostname=cowbell.grooveshark.com&songIDs="{{songId}}"&style=metal&p=0">'+
'<embed src="http://grooveshark.com/songWidget.swf" type="application/x-shockwave-flash"width="250"height="40"flashvars="hostname=cowbell.grooveshark.com&songIDs="{{songId}}"&style=metal&p=0" allowscriptaccess="always" wmode="window"/>'+
'</object>'
}
});