Question

我需要列出具有不同信息的多个项目（歌曲名称，艺术家姓名，专辑名称，专辑图像）。这些信息在一个角度指令的数组中，我需要使用元素注入将它们注入到单独的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中命名相同的东西，并不意味着它们已连接。< / p>

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

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

Answer 2

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

＆＃13;

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

＆＃13;

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

就是这样。

Angular ng使用指令重复数组中的多个项目

2 个答案: