Question

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

这是目标代码。

<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>

我要做的是动态定义songID。我试过了

    <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>'
        }
    });

Answer 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>

Angular Directive修改embed

1 个答案: