我终于有了一个对象并动态创建了它的一些数据。但我现在想使用一个按钮来增加我的数据集，但我无法让它工作。我以为我需要使用scope.watch，但是在将我的elem.append包装在watch函数中之后，当我单击按钮并递增数组时，它仍然没有捕获。
这是我第一次使用模板和指令，它让我大吃一惊。
非常感谢所有帮助。
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
<!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>
最佳答案
以下代码:
scope.$watch(scope.song[scope.numb].$id, function() {
将与:
相同scope.$watch('4453334', function() {
您需要的是:
scope.$watch(function () { return scope.song[scope.numb].$id; }, function() {
请注意，您需要确保 scope.numb不大于scope.song的长度(例如，在 $scope.click 中，和/或 scope.song[song.numb] 不是 undefined watchExpression 中的 scope.$watch。
关于javascript - 链接函数中的 $scope.watch()，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27199239/