How can I pull data (JSON) from a clicked ng-repeat item to load a new, item specific page using $stateParams and ui-router?

问题

This question is similar to what I am asking and I have already implemented some of the code from that. I'm using UI-Router instead, but my main issue is with the $http request and passing the data from the service to the controller. Basically I want to display the details on the album.html from the album clicked on the previous page.

I really just need help with the service and the controller. The HTML is just there for reference/context.

Sorry if this is hard to understand. Please comment if you need clarification.

Here is a link to the GitHub

Album 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>

App Config

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'
    });
});

Album Service (http get 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];
    }; 
}])

Album Controller

.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];
    });
}]);

回答1:

Just wanted to let everyone know that I've solved the problem. Turned out to be an issue with the file paths when accessing the stateparams page via URL. They needed to be absolute as opposed to relative. I've also updated some of the code below to reflect the final product. Let me know if there are any questions!

APP CONFIG

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"
    });
});

ALBUM SERVICE

.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;
                }
            }
        }
    };

ALBUM CONTROLLER

.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)];
        });
}]);

SAMPLE 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"}
]
  }

来源：https://stackoverflow.com/questions/32936457/how-can-i-pull-data-json-from-a-clicked-ng-repeat-item-to-load-a-new-item-spe