奇怪的错误与NG单击

Question

所以我用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播放曲目。从player.js

片段：

所以我有这个在我的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> 

奇怪的是，即使这是正确的渲染：

本被输出到控制台，即使参数是正确的：

为什么不具约束力的数据时，该函数被调用，我失去了一些东西在这里？

Answer 1

我不认为你需要在你的ng-click里面使用大括号。试试这个：

<div class="grid-item" ng-click="ngplaySong(track.ref, track.name)"> 

的事情是，你传递一个表达式ng-click然后通过角度分析，这是足够聪明，从目前的范围认识的变量。你可以阅读更多的角度表达在这里：https://docs.angularjs.org/guide/expression

事实上，在角ng-click文档，其中包括访问ng-click表达式中的局部变量一个非常好的和简单的例子：https://docs.angularjs.org/api/ng/directive/ngClick