javascript - 链接函数中的$ scope.watch()

标签 javascript angularjs angularjs-directive

我终于有了一个对象,并动态创建了它的一些数据。但是我现在想使用一个按钮来增加我的数据集,而我无法使其正常工作。我以为我需要使用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] watchExpression中,undefined不是scope.$watch

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

关于javascript - 链接函数中的$ scope.watch(),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27199239/

相关文章:

javascript - 滚动时屏幕跳转

javascript - 在 AngularJS 的 ionic 框架中使用 ui-router

javascript - Angular.js 和 Fabric.js : Fabric canvas changes behavior once code is moved to a Angular Directive

angularjs - orderBy 在 ng-repeat 中不区分大小写

javascript - AngularJS 指令读取当前模板URL

javascript - Bootstrap Datepicker日期范围和默认日期

javascript - 从所有跨度中找到最大宽度

javascript - Firebase Firestore : get document ID after adding data offline

html div 无法正确对齐

python - 为什么我虽然可以接收数据但仍无法正确呈现数据(Angularjs和flask-restapi/jinja2)