Angular ngrepeat array using directive 中的多个项目

Question

我需要列出多个具有不同信息（歌曲名称、艺术家姓名、专辑名称、专辑图片）的项目。这些信息位于 angular 指令的数组中，我需要使用元素注入将它们注入到单独的 templateUrl 中。这是指令

 app.directive('songList', function($filter) {
   return {
     restrict: 'E',
     templateUrl: $filter('baseUrl')("/content/mobile/app/views/addmusic/songList.html"),
     controller: function($scope, $timeout) {
       $scope.loadMoreSongs = function() {
         $scope.busy = true;
         $timeout(function() {
           $scope.offset += $scope.pageSize;
           if ($scope.offset > $scope.songs.length)
             $scope.offset = $scope.songs.length;
           $scope.busy = false;
         }, 300);
       };

       $scope.songs = [{
         "id": 1,
         "songName": "Children of the Sea",
         "artistName": "Black         Sabbath",
         "albumName": "Heaven and Hell",
         "thumbnailUrl": "http://upload.wikimedia.org/wikipedia/en/f/f8/Black_Sabbath_Heaven_and_Hell.jpg"
       }, {
         "id": 2,
         "songName": "Turbo Lover",
         "artistName": "Judas Priest",
         "albumName": "Turbo Lover",
         "thumbnailUrl": "http://upload.wikimedia.org/wikipedia/en/8/8a/Judas_Priest_Turbo.jpg"
       }, {
         "id": 3,
         "songName": "High Hopes",
         "artistName": "Pink Floyd",
         "albumName": "Divison Bell",
         "thumbnailUrl": "http://upload.wikimedia.org/wikipedia/el/9/96/Pink_floyd_the_division_bell_front.jpg"
       }, {
         "id": 4,
         "songName": "When a Blind Man Cries",
         "artistName": "Deep Purple",
         "albumName": "Machine Head",
         "thumbnailUrl": "http://www.inthestudio.net/wp-content/uploads/2012/08/deep_purple_machine_head_640x640.jpg"
       }, {
         "id": 5,
         "songName": "Amamos La Vida",
         "artistName": "Accept",
         "albumName": "Objection Overruled",
         "thumbnailUrl": "https://farm8.staticflickr.com/7051/6982758045_167210f89e.jpg"
       }];
     },
     controllerAs: 'song'
   }
 });

这是显示一首歌曲的 templateUrl (songListItem.html)：

<li class="media">
  <a ng-href="#">
    <div class="song-names-container">
      <div class="img-container media-left">
        <img class="media-object img-frame" src="{{song.thumbnailUrl}}" alt="" />
      </div>
      <div class="media-body">
        <h3><strong>{{song.songName}}</strong></h3>
        <div>
          <p>{{song.artistName}} - {{song.albumName}}</p>
        </div>
      </div>
    </div>
  </a>
</li>

这是主 html 页面 (songList.html)，ngrepeat 应该在其中运行并显示歌曲列表：

<div class="add-music-form">
  <div class="modal-header">
    <input type="search" class="form-control" placeholder="Search over 15 million songs..." />
  </div>
  <div class="song-names-title">
    <p>Songs</p>
  </div>
  <div class="modal-body">
    <ul class="media-list">
      <song-list-item ng-repeat="song in songs"></song-list-item>
    </ul>
    <div class="more-songs"></div>
    <div class="album-names-title"></div>
    <div class="album-names"></div>
  </div>
</div>

如有任何帮助，我们将不胜感激。

Answer 1

song 就像一个实例变量，所以仅仅因为它在模板和 ng-repeat 中被命名为相同的东西，并不意味着它们是连接的。

您需要修改您的指令，使其接受一个属性，然后将歌曲传递给该属性，我认为它看起来像这样：

<div ng-repeat="song in songs">
    <song-list-item song-data={{song}}></song-list-item>
</div>

Answer 2

找到解决方案。我没有在任何地方放置 songList 指令。我添加了 index.html 文件，并将其包含在其中。

<div class="musicMain" ng-controller="BasicAppCtrl">
    <song-list></song-list>
</div>

<ul class="media-list">
           <song-list-item data-model="song" ng-repeat="song in songs"></song-list-item>
</ul>

就是这样。

Angular ngrepeat array using directive 中的多个项目

Angular ngrepeat multiple items in an array using directive

angularjs

angularjs-directive

angularjs-ng-repeat