I finally have an object and have some of its data dynamically created.(我终于有了一个对象,并动态创建了它的一些数据。)
But I now want to use a button to increment through my data set and I cant get this to work.(但是我现在想使用一个按钮来增加我的数据集,而我无法使其正常工作。) I thought I needed to use the scope.watch but after wrapping my elem.append in the watch function it still doesn't catch when I click the button and increment through my array.(我以为我需要使用scope.watch,但是将elem.append包装在watch函数中之后,单击按钮并遍历数组时仍然无法捕获。)
this is my first time playing with templates and directives and it is kicking my butt.(这是我第一次使用模板和指令,它正在踢我的屁股。)
All help is greatly appreciated.(非常感谢所有帮助。)
app.js(app.js)
angular.module("App", [])
.controller("MainCtrl", function($scope) {
$scope.count=0;
$scope.bpmSong=[{
"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: {
song: '='
},
controller: function($scope) {
$scope.numb = 0;
$scope.click = function () {
$scope.numb++
}
},
template: '<button ng-click="click()">Click me</button> Clicked {{numb}} times',
link: function(scope, elem) {
scope.$watch(scope.song[scope.numb].$id, function(){
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.song[scope.numb].$id +
'&style=metal&p=0" allowscriptaccess="always" wmode="window"></embed>'+
'</object>'
);
})
}
}
});
index.html(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>
<flash-widget song="bpmSong"></flash-widget>
</div>
</div>
<script src="dist/js/angular.js"></script>
<script src="js/tester.js"></script>
</body>
</html>
ask by FPcond translate from so
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…