Angular 指令修改嵌入答案

【问题标题】：Angular Directive to modify embedAngular 指令修改嵌入
【发布时间】：2014-11-25 02:47:43
【问题描述】：

我正在尝试使用 Angular 指令修改嵌入对象。我很难让指令生效。

这是目标代码。

<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&amp;songIDs=26593443&amp;style=metal&amp;p=0">
    <embed src="http://grooveshark.com/songWidget.swf" type="application/x-shockwave-flash" width="250"height="40"flashvars="hostname=cowbell.grooveshark.com&amp;songIDs=26593443&amp;style=metal&amp;p=0" allowscriptaccess="always" wmode="window"/>
</object>

我想要做的是动态定义歌曲 ID。我试过了

    <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&amp;songIDs=" + {{bpmSong[0].$id}} + "&amp;style=metal&amp;p=0">
        <embed src="http://grooveshark.com/songWidget.swf" type="application/x-shockwave-flash"width="250"height="40"flashvars="hostname=cowbell.grooveshark.com&amp;songIDs=" + {{bpmSong[0].$id}} + "&amp;style=metal&amp;p=0" allowscriptaccess="always" wmode="window"/>
    </object>

基本上我有一个号码是{{bpmSong[0].$id}}，我试图用它来定义为 SongID。

我认为指令是我需要的解决方案，但我无法让指令起作用。

非常感谢任何帮助。

从@JayMc 的回答中尝试更新。我还更改了 src，以便我没有收到语法错误。还是不行。

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">'+
            '<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&amp;songIDs="{{songId}}"&amp;style=metal&amp;p=0">'+
            '<embed src="http://grooveshark.com/songWidget.swf" type="application/x-shockwave-flash"width="250"height="40"flashvars="hostname=cowbell.grooveshark.com&amp;songIDs="{{songId}}"&amp;style=metal&amp;p=0" allowscriptaccess="always" wmode="window"/>'+
                '</object>'
        }
    });

【问题讨论】：

您忘记将template: 中的字符串与+ 连接
我做了，我移动了 src，我不再收到语法错误，但 Flash 播放器说没有歌曲

标签： javascript angularjs embed firebase

【解决方案1】：

尝试如下指令，这是未经测试的。

.directive('flashWidget', function(){

return {
    restrict: 'E',
    scope: {
        width:'=',
        height:'=',
        src: '=',
        songID: '='
    },
    template: '<object width="{{width}}" height="{{height}}">'+
                '<param name="movie" value="{{src}}">'+
                '<param name="wmode" value="window">'+
                '<param name="allowScriptAccess" value="always">'+
                '<param name="flashvars"value="hostname=cowbell.grooveshark.com&amp;songIDs="{{songId}}"&amp;style=metal&amp;p=0">'+
                '<embed src="{{src}}" type="application/x-shockwave-flash"width="{{width}}"height="{{height}}"flashvars="hostname=cowbell.grooveshark.com&amp;songIDs="{{songId}}"&amp;style=metal&amp;p=0" allowscriptaccess="always" wmode="window"/>'+
            '</object>'
    }
})

然后将数据传递到视图中的指令中：

<flash-widget width='250' height='40' src='http://grooveshark.com/songWidget.swf' songID='{{bpmSong[0].$id}}' ></flash>

【讨论】：

这不起作用，但我认为这就是我正在寻找的我正在用更多代码更新我的问题，这样你就可以看到我正在使用什么
错误：未捕获的语法错误：模板行出现意外字符串
关闭！错误：语法错误：标记“：”是表达式第 5 列中的意外标记
如果没有看到整个代码，我就忍不住了。阅读 Dan Wahlins 指令指南weblogs.asp.net/dwahlin/…
好的，请看一下指南。那是我的整个代码，我唯一没有添加的是带有完整 Firebase url 的 angular.constant