如何使用 $stateParams 和 ui-router 从单击的 ng-repeat 项目中提取数据 (JSON) 以加载新的项目特定页面？

Question

This question 与我的要求类似，我已经实现了其中的一些代码。我正在使用 UI-Router，但我的主要问题是 $http 请求并将数据从服务传递到控制器。基本上我想从上一页点击的专辑中显示专辑的详细信息。

我真的只需要服务和控制器方面的帮助。 HTML 仅供参考/上下文。

对不起，如果这很难理解。如果您需要澄清，请发表评论。

Here 是 GitHub 的链接

相册 HTML

<main class="album-view container narrow">
<section class="clearfix">
    <div class="column half">
        <img ng-src="{{album.albumArtUrl}}" class="album-cover-art">
    </div>
    <div class="album-view-details column half">
        <h2 class="album-view-title">{{album.name}}</h2>
        <h3 class="album-view-artist">{{album.artist}}</h3>
        <h5 class="album-view-release-info">{{album.year}} | {{album.label}}</h5>
    </div>
</section>
<table class="album-view-song-list">
    <tr class="album-view-song-item" ng-repeat="song in album.songs">
        <td class="song-item-number" data-song-number="{{$index + 1}}">{{$index + 1}}</td>
        <td class="song-item-title">{{song.name}}</td>
        <td class="song-item-duration">{{song.length}}</td>
    </tr>
</table>

应用配置

var blocJams = angular.module("blocJams", ["ui.router"]);

blocJams.config(function($stateProvider, $locationProvider){
$locationProvider.html5Mode({
    enabled: true,
    requireBase: false
});
$stateProvider
    .state('album', {
        url: '/album/:albumId',
        controller: 'AlbumController',
        templateUrl: '../templates/album.html'
    });
});

专辑服务（http 获取 json）

.service("albumsService", ["$http", function ($http) {
    var model = this;

    model.collection = $http.get("/data/albums.json");

    model.getCollection = function() {
        return model.collection;
    };

    model.getAlbumAt = function(_id) {
        model.getCollection();
        return filterFilter(model.collection, {
            id: _id
        })[0];
    }; 
}])

相册控制器

.controller('AlbumController', ["$scope", "albumsService", "$stateParams", function ($scope, albumsService, $stateParams) {

    albumsService.collection.then(function (albums) {
        //$scope.album = albumsService.getAlbumAt($stateParams.albumId);
        $scope.album = albums.data[0];
    });
}]);

Answer 1

只是想让大家知道我已经解决了这个问题。通过 URL 访问 stateparams 页面时，文件路径出现问题。它们需要是绝对的，而不是相对的。我还更新了下面的一些代码以反映最终产品。如果有任何问题，请告诉我！

应用配置

var blocJams = angular.module("blocJams", ["ui.router", "services"]);

blocJams.config(function($stateProvider, $locationProvider){
$locationProvider.html5Mode({
    enabled: true,
    requireBase: false
});
$stateProvider
    .state('album', {
        url: "/album/:id",
        controller: "AlbumController",
        templateUrl: "../templates/album.html"
    });
});

专辑服务

.service("albumsService", ["$http", function ($http) {
    "use strict";

    var albumsService = this, i;

    albumsService.collection = $http.get("/data/albums.json");

    return {

        collection: albumsService.collection,
        getAlbumById: function (data, prop, value) {
            for (i = 0; i < data.length; i++) {
                if (data[i][prop] == value) {
                    return i;
                }
            }
        }
    };

专辑控制器

.controller('AlbumController', ["$scope", "$stateParams", "albumsService", function ($scope, $stateParams, albumsService) {
        "use strict";

        albumsService.collection.then(function (albums) {
            //$scope.album = albumsService.getAlbumAt($stateParams.albumId);
            //$scope.album = albums.data[$stateParams.id];
            $scope.collection = albums.data;
            console.log($scope.album);
            $scope.album = albums.data[albumsService.getAlbumById($scope.collection, "aid", $stateParams.id)];
        });
}]);

JSON 示例

{
"aid": "picasso",
"name": "The Colors",
"artist": "Pablo Picasso",
"label": "Cubism",
"year": "1881",
"albumArtUrl": "/assets/images/album_covers/01.png",
"songs": [
  { "name": "Blue", "length": "4:26", "audioUrl": "assets/music/blue" },
  { "name": "Green", "length": "3:14", "audioUrl": "assets/music/green" },
  { "name": "Red", "length": "5:01", "audioUrl": "assets/music/red" },
  { "name": "Pink", "length": "3:21", "audioUrl": "assets/music/pink"},
  { "name": "Magenta", "length": "2:15", "audioUrl": "assets/music/magenta"}
]
  }