Question

所以我已经弄清楚如何使指令和控制器进行通信，并正确填充嵌入代码。我在控制台中没有出现任何错误，并且html看起来与手动创建的嵌入相同。但是该指令创建的flash根本不起作用。任何关于为什么会这样的想法或想法都会很棒。

这就是网站的样子

以下是代码：

的index.html

    <!DOCTYPE html>
    <html>
    <head>
        <link rel="stylesheet" href="dist/css/bootstrap.css"/>
        <link rel="stylesheet" href="dist/css/bootstrap-theme.css"/>
    </head>

    <body ng-app="App">
    <div ng-controller="MainCtrl">
        <div class="col-md-12">
            <h2>This is from the Controller and Directive</h2>
            Song[0] ID: {{Song[0].$id}}
            <flash-widget id="Song"></flash-widget>
        </div>
    </div>
    <div class="col-md-12">
        <h2>This is done Manually</h2>
        Song[0] ID: 4453334
        <object width="250" height="40">
            <embed src="http://grooveshark.com/songWidget.swf" type="application/x-shockwave-flash" width="250"height="40"flashvars="hostname=cowbell.grooveshark.com&amp;songIDs=4453334&amp;style=metal&amp;p=0" allowscriptaccess="always" wmode="window"/>
        </object>
    </div>
    </body>

    <script src="dist/js/angular.js"></script>
    <script src="js/tester.js"></script>
    </body>
    </html>

tester.js

    angular.module("App", [])
        .controller("MainCtrl", function($scope) {
            $scope.Song=[{
                    "AlbumName":"Unknown Album",
                    "ArtistName":"Angel City",
                    "SongName":"Love Me Right Feat. Laura McAllen[Rezonance Q Remix]",
                    "$id":"4453334",
                    "$priority":null
                },
                    {
                        "AlbumName":"Immersion",
                        "ArtistName":"Pendulum",
                        "SongName":"The Island - Part 1 - Dawn",
                        "$id":"26593443",
                        "$priority":null
                    },
                    {
                        "AlbumName":"Someone to Love Me",
                        "ArtistName":"Jomanda",
                        "SongName":"Got a Love for You",
                        "$id":"29376555",
                        "$priority":null
                    },
                    {
                        "AlbumName":"Avicii - Essential Mix (2010-12-11)",
                        "ArtistName":"Avicii",
                        "SongName":"Penguin",
                        "$id":"29533653",
                        "$priority":null
                    },
                    {
                        "AlbumName":"MOS Addicted To Bass 2011",
                        "ArtistName":"Eric Prydz",
                        "SongName":"Niton (The Reason)",
                        "$id":"30154682",
                        "$priority":null
                    }]
        })
        .directive('flashWidget', function(){
            return{
                restrict: 'E',
                scope: {id: '='},
                template: '<object width="250" height="40">'+
                '<embed src="http://grooveshark.com/songWidget.swf" type="application/x-shockwave-flash" width="250" height="40" flashvars="hostname=cowbell.grooveshark.com&songIDs={{id[0].$id}}&style=metal&p=0" allowscriptaccess="always" wmode="window"></embed>'+
                '</object>'
            }
        });

Answer 1

以下是您正在尝试做的事情的追截者： http://plnkr.co/edit/t1UJMLtiBaKQnb7syPJH?p=preview

(function(){


angular.module("App", [])
        .controller("MainCtrl", function($scope) {
            $scope.Song=[{
                    "AlbumName":"Unknown Album",
                    "ArtistName":"Angel City",
                    "SongName":"Love Me Right Feat. Laura McAllen[Rezonance Q Remix]",
                    "$id":"4453334",
                    "$priority":null
                },
                    {
                        "AlbumName":"Immersion",
                        "ArtistName":"Pendulum",
                        "SongName":"The Island - Part 1 - Dawn",
                        "$id":"26593443",
                        "$priority":null
                    },
                    {
                        "AlbumName":"Someone to Love Me",
                        "ArtistName":"Jomanda",
                        "SongName":"Got a Love for You",
                        "$id":"29376555",
                        "$priority":null
                    },
                    {
                        "AlbumName":"Avicii - Essential Mix (2010-12-11)",
                        "ArtistName":"Avicii",
                        "SongName":"Penguin",
                        "$id":"29533653",
                        "$priority":null
                    },
                    {
                        "AlbumName":"MOS Addicted To Bass 2011",
                        "ArtistName":"Eric Prydz",
                        "SongName":"Niton (The Reason)",
                        "$id":"30154682",
                        "$priority":null
                    }];
            $scope.selectedSong = {}; 
            $scope.currentSong = function(){return $scope.selectedSong ; }
            $scope.selectSong = function (i){
                $scope.selectedSong = $scope.Song[i];
            };

        })
        .directive('flashWidget', function(){
            return{
                restrict: 'E',
                scope: {song: '&'},

                link: function(scope, elem, attrs) {

                    function updateDom(song){
                        if (song.$id == undefined)
                            return;
                        elem.html('<object width="250" height="40">'+
                        '<embed src="http://grooveshark.com/songWidget.swf" type="application/x-shockwave-flash" width="250" height="40" flashvars="hostname=cowbell.grooveshark.com&songIDs=' +
                        song.$id +
                        '&style=metal&p=0" allowscriptaccess="always" wmode="window"></embed>'+
                    '</object>');

                    }

                    scope.$watch(scope.song, function(value) {
                      updateDom(value)
                    });
                }
            }
        });

})()

使用＆＃39;＆amp;＆＃39;用于在控制器和指令之间建立只读链接的运算符。＆amp;运算符在指令范围属性和父范围中的表达式之间建立绑定。在这个例子中，父作用域中的表达式是一个返回当前所选歌曲的函数。可以通过任何方式选择当前歌曲 - 但在这种情况下，选择由按钮点击事件触发。

每当此表达式的值发生更改时（换句话说，当前所选歌曲发生更改时），将触发此指令属性上定义的$ watch方法，从而使用新歌曲ID重新绑定DOM元素。

Answer 2

当元素添加到页面时，不会评估模板中的{{id[0].$id}}，因此您的flashvars将获得无效值。知道要传递给嵌入的值后，在link函数中创建元素，以确保传递实际值而不是未评估的表达式。

这样的事情：

.directive('flashWidget', function(){
    return{
        restrict: 'E',
        scope: {id: '='},
        link: function(scope, elem) {
            elem.append('<object width="250" height="40">'+
                '<embed src="http://grooveshark.com/songWidget.swf" type="application/x-shockwave-flash" width="250" height="40" flashvars="hostname=cowbell.grooveshark.com&songIDs=' +
                scope.id[0].$id +
                '&style=metal&p=0" allowscriptaccess="always" wmode="window"></embed>'+
            '</object>');
        }
    }
});

如果您的数据发生变化，您需要在scope.$watch中创建元素。

使用Angular Directive动态创建嵌入对象

2 个答案: