AngularJS父元素ng-init异步返回数据致ng-repeat不渲染问题

你的问题核心在于异步操作的处理逻辑错误，导致Angular无法感知到数据的更新，最终ng-repeat没有渲染内容。具体来说：

1. 你的getSongsFromCollab函数其实没有返回任何值——Firebase的once()是异步操作，你在回调里写的return array_of_songs根本不会传递到函数的调用者那里，所以collabSongs从始至终都是undefined。
2. 就算你拿到了数组，也没有把它赋值到$scope上并触发Angular的脏检查机制，Angular完全不知道数据已经更新了。

下面是具体的修复步骤和代码：

第一步：重构控制器中的异步函数 #

修改getSongsFromCollab，让它直接在Firebase回调里更新$scope上的数据，并且确保Angular能感知到变化：

$scope.getSongsFromCollab = function(collaborationId, currentSong) {
  console.log('getSongs', collaborationId);
  var songsRef = new Firebase(FBURL + 'collaboration_songs').child(collaborationId).child('songs');
  
  songsRef.once("value", function(data) {
    var val = data.val();
    var array_of_songs = [];
    var keys = Object.keys(val);
    
    for (var i = 0; i < keys.length; i++) {
      array_of_songs.push(val[keys[i]]);
    }
    
    console.log(array_of_songs);
    // 直接把结果绑定到当前song对象的属性上，避免变量污染
    currentSong.collabSongs = array_of_songs;
    
    // 如果Firebase回调不在Angular的脏检查周期内，手动触发更新
    if (!$scope.$$phase) {
      $scope.$apply();
    }
  });
};

第二步：修改HTML中的绑定逻辑 #

把ng-repeat绑定到当前song对象的collabSongs属性上，同时调整ng-init的调用方式：

<span ng-click="showArtist(song.artist.key)" class="song_alias" 
      ng-init="getSongsFromCollab(song.collaboration_id, song);"> 
  {{song.artist.alias}} 
  <span ng-repeat="songItem in song.collabSongs track by $index">
    {{$index != (song.collabSongs.length - 1) ? songForKey(songItem).artist.alias : 'goo'}}
  </span> 
</span>

为什么这样修复？ #

• 我们不再试图从异步函数里返回值，而是直接把数据赋值到当前song对象的属性上，每个歌曲条目都有自己独立的协作歌曲集合，不会互相干扰。
• 通过$scope.$apply()确保Angular感知到数据变化，触发视图更新——Firebase的回调默认不在Angular的脏检查周期内，所以需要手动触发。
• 添加track by $index是为了避免可能的重复key报错，如果你的songItem有唯一标识（比如key字段），可以替换成track by songItem.key，性能更好。

额外建议 #

尽量避免在ng-init里做复杂的异步操作，如果是批量数据，更推荐在控制器初始化时一次性加载所有协作歌曲数据，然后在视图里直接绑定，这样能减少重复的Firebase请求。

内容的提问来源于stack exchange，提问作者Thalatta