所以我已经弄清楚如何使指令和 Controller 进行通信，并正确填充嵌入代码。我在控制台中没有收到任何错误，并且 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&songIDs=4453334&style=metal&p=0" allowscriptaccess="always" wmode="window"/>
</object>
</div>
</body>
<script src="dist/js/angular.js"></script>
<script src="js/tester.js"></script>
</body>
</html>
测试器.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>'
}
});
最佳答案
这是您尝试执行的操作的一个小工具: 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)
});
}
}
});
})()
使用“&”运算符在 Controller 和指令之间建立只读链接。 & 运算符在指令作用域属性和父作用域中的表达式之间建立绑定(bind)。在本例中，父作用域中的表达式是一个返回当前所选歌曲的函数。可以通过任何方式选择当前歌曲 - 但在本例中，选择是由按钮单击事件触发的。
只要该表达式的值发生变化(即当前选定的歌曲发生变化时)，就会触发在此指令属性上定义的 $watch 方法，从而将 DOM 元素与新的歌曲 ID 重新绑定(bind)。
关于javascript - 使用 Angular 指令动态创建嵌入对象，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27163191/