javascript - AngularJS ng-click 在点击时显示值

Question

Angular 新手。所以这就是我想要实现的目标:

1. 执行 $http get 请求以获取相册列表并将它们作为 URL 列表显示在 UI 中(响应示例为 ['album1', 'album2', 'album3']
2. 当我点击相册 1 时，我需要为相册 1 发出 $http get 请求。当我点击相册 2 时，我需要为相册 2 发出 $http get 请求，依此类推并相应地显示该响应.

这是我的代码的样子。 (我知道无论如何都会进行第一个 get 调用，但后续调用将在点击事件上进行。)

// module
(function () {
'use strict';

angular.module('app.fileUploadForm', [
    'app.layout',
    'ui.router',
    'angularFileUpload'
]).config(FileUploadFormConfiguration);

FileUploadFormConfiguration.$inject = ['$stateProvider'];
function FileUploadFormConfiguration($stateProvider) {

    $stateProvider.state('fileUploadForm', {
        url: '/fileUploadForm',
        parent: 'default',
        templateUrl: 'app/fileUploadForm/fileUploadForm.html',
        controller: 'FileUploadFormController as vm'
    });
}
})();


// Controller
(function (){

angular.module('app.fileUploadForm').controller('FileUploadFormController', FileUploadFormController);

FileUploadFormController.$inject = ['$http', '$log', '$scope', '$rootScope', 'APP_CONFIG'];
function FileUploadFormController ($http, $log, $scope, $rootScope, APP_CONFIG){

    var vm = this;
    vm.albums = init;
    vm.albums.tracks = getAlbumTracks;
    vm.newFunction = newFunction;

    return init();
    function init(){
     $http.get('http://localhost:8080/api/albums').then(function(responseData){
            // Parse the json data here and display it in the UI
            $scope.vm.albums = responseData.data;
            $log.debug(angular.toJson(responseData, true));

//              console.log(vm.albums.tracks);
            return vm.albums;
        })
    }

    function getAlbumTracks(album, $scope){
        $http.get('http://localhost:8080/api/albums/'+album).success(function(trackResponse){
            //parse each album and get the track list
            $scope.vm.albums.tracks = vm.albums.tracks.concat(trackResponse);
            return vm.albums.tracks;
        })
    }

}

// HTML code:
<div class="wrapper wrapper-content">
hello!
<div>
    <ul>
        <li ng-repeat="album in vm.albums"><a href ng-click="vm.getAlbumTracks(album)">{{album}}</a></li>
        <ul>
            <li ng-repeat="track in vm.albums.tracks"><a href ng-click="vm.displayForm(track)">{{track}}</a></li>
        </ul>
    </ul>
</div>

我可以看到专辑列表，但点击专辑后获取轨道信息的第二个请求没有打印任何内容。任何线索如何实现这一目标？谢谢

Answer 1

一行答案解决了这个问题。

改变:

vm.albums.tracks = getAlbumTracks; 到 vm.getAlbumTracks = getAlbumTracks;