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

Question

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应用程序.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索引.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

The following code:以下代码：

scope.$watch(scope.song[scope.numb].$id, function() {

Will be the same as:将与以下相同：

scope.$watch('4453334', function() {

What you need is:你需要的是：

scope.$watch(function () { return scope.song[scope.numb].$id; }, function() {

Note that you need to make sure that scope.numb is not greater than the length of scope.song (in $scope.click for example, and/or that scope.song[song.numb] is not undefined in the scope.$watch watchExpression.请注意，您需要确保scope.numb不大于长度更大scope.song （在$scope.click例如，和/或scope.song[song.numb]没有undefined的scope.$watch表达式。

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

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

问题描述

1 个解决方案

解决方案1
1 已采纳 2014-11-29 07:03:32

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

问题描述

1 个解决方案

解决方案1 1 已采纳 2014-11-29 07:03:32

解决方案1
1 已采纳 2014-11-29 07:03:32