Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
97 views
in Technique[技术] by (71.8m points)

javascript - 链接函数中的$ scope.watch()($scope.watch() in a link function)

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

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

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]没有undefinedscope.$watch watchExpression。) Demo: http://plnkr.co/edit/0wcJFTvBZxcBGKcRBWOc?p=preview(演示: http : //plnkr.co/edit/0wcJFTvBZxcBGKcRBWOc?p=preview)

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...