所以我使用ng-repeat
创建了相册中所有歌曲的列表(请参阅我前面提到的this问题)
所以我现在要做的就是当用户点击列表中的某个项目时,它会播放引用的轨道。这是我的应用程序:
enitoniApp.controller('musicItems', ['$scope', function ($scope) {
$scope.ngplaySong = function (ref, name) {
playSong(ref, name)
}
$scope.albums = [
{
name: 'Over The Mountains',
price: 0,
tracks: [
{
name: 'Over The Mountains',
ref: 'otm',
released: 0,
},
{
name: '!C3',
ref: 'ice',
released: 0,
},
{
name: 'Dark Clouds',
ref: 'clouds',
released: 0
},
{
name: 'Fog',
ref: 'fog',
released: 0
}
]
},
{
name: 'test-album',
price: 5000,
tracks: [
{
name: 'test',
ref: 'null'
},
]
}
]
}]);
如您所见,我尝试使用ng-click调用常规函数。这个常规函数(playSong()
)位于我的播放器的代码中,并根据引用ID播放曲目。
片段:
/** Play single song **/
function playSong(ref, name) {
showPlayer();
clearPlaylist()
playlistPosition = 0;
addToPlaylist(ref, name, 'play')
}
所以我在我的html中有这个:
<li ng-repeat="album in albums">
<div class="info">
<p>{{album.name}}</p>
<p>{{album.price | currency}}</p>
</div>
<ul>
<li ng-animate="grid-fade" ng-repeat="track in album.tracks">
<div class="grid-item" ng-click="ngplaySong('{{track.ref}}','{{track.name}}')">
<div class="cover">
<img ng-src="/img/covers/art_{{track.ref}}.png" alt="">
</div>
<div class="info">
<p>{{track.name}}</p>
<p>{{track.released}}</p>
</div>
</div>
</li>
</ul>
</li>
奇怪的是,尽管这是正确渲染的:
即使参数正确,此 也会输出到控制台:
为什么在调用函数时它没有绑定数据,我在这里遗漏了什么?
答案 0 :(得分:2)
我认为你ng-click
中不需要那些括号。试试这个:
<div class="grid-item" ng-click="ngplaySong(track.ref, track.name)">
问题是你将一个表达式传递给ng-click
,然后由Angular解析,它足够聪明地识别当前范围内的变量。您可以在此处阅读有关Angular表达式的更多信息:https://docs.angularjs.org/guide/expression
事实上,Angular ng-click
文档中有一个非常好的简单示例,其中包括访问ng-click
表达式中的局部变量:https://docs.angularjs.org/api/ng/directive/ngClick