Question

我终于让对象动态创建了一些数据。但我现在想用一个按钮来增加我的数据集，我不能让它工作。我以为我需要使用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>

Answer 1

以下代码：

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 scope.$watch watchExpression中的{1}}。

演示： http://plnkr.co/edit/0wcJFTvBZxcBGKcRBWOc?p=preview

链接函数中的$ scope.watch（）

1 个答案: