Question

我ng-repeat在另一个模板中工作，但是，我无法让我的album.html模板显示内容。这就是我所拥有的。

app.js

...
            .state('album', {
                url: '/album',
                controller: 'AlbumCtrl as album',
                templateUrl: '/templates/album.html'
            })
...

AlbumCtrl.js

(function() {

  function AlbumCtrl() {
    this.albumData = angular.copy(albumPicasso);
  };

  angular
    .module('blocJams')
    .controller('AlbumCtrl', AlbumCtrl);

})();

fixture.js （我希望复制我的对象）

var albumPicasso = {
    title: 'The Colors',
    artist: 'Pablo Picasso',
    label: 'Cubism',
    year: '1881',
    albumArtUrl: 'assets/images/album_covers/01.png',
    songs: [
        { title: 'Blue', duration: 161.71, audioUrl: 'assets/music/bloc_jams_music/blue' },
        { title: 'Green', duration: 103.96, audioUrl: 'assets/music/bloc_jams_music/green' },
        { title: 'Red', duration: 268.45, audioUrl: 'assets/music/bloc_jams_music/red' },
        { title: 'Pink', duration: 153.14, audioUrl: 'assets/music/bloc_jams_music/pink' },
        { title: 'Magenta', duration: 374.22, audioUrl: 'assets/music/bloc_jams_music/magenta' }
    ]
};

albumt.html （这是我的模板ng-repeat）

<main class="album-view container narrow">
    <section class="clearfix">
        <div class="column half">
            <img src="/assets/images/album_covers/01.png" class="album-cover-art">
        </div>
        <div class="album-view-details column half">
            <h2 class="album-view-title">The Colors</h2>
            <h3 class="album-view-artist">Pablo Picasso</h3>
            <h5 class="album-view-release-info">1909 Spanish Records</h5>
        </div>
    </section>
    <table class="album-view-song-list">
        <tr class="album-view-song-item" ng-repeat="album in album.albumData" ng-mouseover="hovered = true" ng-mouseleave="hovered = false">
            <td class="song-item-number">
              <span ng-show="!playing && !hovered"></span>
              <a class="album-song-button" ng-show="!playing && hovered"><span class="ion-play"></span></a>
              <a class="album-song-button" ng-show="playing"><span class="ion-paused"></span></a>
            </td>
            <td class="song-item-title">{{ album.songs.title }}</td>
            <td class="song-item-duration">{{ album.songs.duration }}</td>
        </tr>
    </table>
</main>

<ng-include src="'/templates/player_bar.html'"></ng-include>

{{ album.songs.title }}和{{ album.songs.duration }}未显示任何内容，也未收到任何错误。我个人认为我没有正确地通过我的控制器复制我的对象？此外，如何通过我的控制器查看我对所述对象的输入，以测试我的对象albumPicasso是否被正确复制了？

供参考

此控制器（CollectionCtrl.js）正常工作，并反映了除for循环之外我想要做的事情。

(function() {

  function CollectionCtrl() {
    this.albums = [];
    for (var i=0; i < 12; i++) {
      this.albums.push(angular.copy(albumPicasso));
    }
  }


  angular
    .module('blocJams')
    .controller('CollectionCtrl', CollectionCtrl);
})();

Answer 1

album in album.albumData
您可能想要不覆盖album变量名吗？

控制器别名只是范围可变。你正在覆盖它。

看起来像：

for (var i = 0; i < album.albumData.length; i++) {
  album = album.albumData[i]; // <-- We brake all things here
}

只需将album中的ngRepeat重命名为item：

ng-repeat="item in album.albumData"

此外，您希望迭代songs数组，而不是对象：

ng-repeat="song in album.albumData.songs"

和

{{song.title}}

Answer 2

albumPicasso似乎不是一个全局变量，因此它似乎无法从AlbumCtrl.js访问。尝试将this.albumData设置为某些虚拟数据。

我个人会创建一个角度服务，提供相册数据并将其注入控制器。

Answer 3

您可以为此

创建服务

(function() {
  var albumPicasso = {
    title: 'The Colors',
    artist: 'Pablo Picasso',
    label: 'Cubism',
    year: '1881',
    albumArtUrl: 'assets/images/album_covers/01.png',
    songs: [{
      title: 'Blue',
      duration: 161.71,
      audioUrl: 'assets/music/bloc_jams_music/blue'
    }, {
      title: 'Green',
      duration: 103.96,
      audioUrl: 'assets/music/bloc_jams_music/green'
    }, {
      title: 'Red',
      duration: 268.45,
      audioUrl: 'assets/music/bloc_jams_music/red'
    }, {
      title: 'Pink',
      duration: 153.14,
      audioUrl: 'assets/music/bloc_jams_music/pink'
    }, {
      title: 'Magenta',
      duration: 374.22,
      audioUrl: 'assets/music/bloc_jams_music/magenta'
    }]
  };

  function fixtureService() {
    this.getAlbumData = function(){
      return albumPicasso;
    };
  }

  angular
    .module('myApp')
    .service('fixtureService', fixtureService);

})();

并且可以将此服务注入您的控制器

(function() {

  function AlbumController(fixtureService) {
    this.albumData = fixtureService.getAlbumData();
    console.log(this.albumData);
  }

  angular
    .module('myApp')
    .controller('AlbumController',['fixtureService', AlbumController]);

})();

ng-repeat没有正确复制

3 个答案: