Angular JS Json没有在html视图中填充

时间:2015-05-24 01:19:32

标签: javascript html json angularjs

我有一个非常奇怪的问题。但是由于一些非常令人讨厌的原因,同一个JSON对象被一个视图所联系但没有另一个(我知道这听起来真的很疯狂,但我无法理解它)。

我有两个相同的html视图,以角度为单位指向不同的控制器。

两个html都在客户端的不同路由上呈现:

我的app.js看起来像:

.state('app.singlecategory', {
    url: "/search/:mycat",
    views: {
        'menuContent': {
            templateUrl: "templates/playlist.html",
            controller: 'SearchCategoryControl'
        }
    }
})

.state('app.single', {
    url: "/playlists/:playlistId",
    views: {
        'menuContent': {
            templateUrl: "templates/playlist.html",
            controller: 'PlaylistCtrl'
        }
    }
});

所以现在两条路线/ search /:mycat和on / playlists /:playlistId我显示的是同一个html页面但是有不同的控制器。现在在我的controllers.js中,这就是正在发生的事情:

.controller('PlaylistCtrl', function($scope, $stateParams, $http, $sce) {
    var podcastId = $stateParams.playlistId


    //SAD Group: Controller action to get JSON for individial podcast
    $http.get('http://SRHRadio.com/podcasts/' + podcastId).success(function(data) {
        $scope.items = data;
        $scope.audioURL = $scope.items.resourceURI + $scope.items.podcastfile
        $scope.audioURL = $sce.trustAsResourceUrl($scope.audioURL);
        //alert($scope.audioURL);
    });

    $scope.audioHide = true;
    //SAD Grpup: Controller action for Displing the hidden audio tag  
    $scope.showAudio = function(showAudio) {
        $scope.audioHide = !$scope.audioHide;

    }
})

.controller('SearchCategoryControl', function($scope, $stateParams, $http) {
    var mycats = $stateParams.mycat
    $http.get('http://SRHRadio.com/podcasts/categories/' + mycats).success(func tion(data) {
        $scope.items = data;
    });
});

控制器PlaylistCtrl工作正常,返回的JSON对象是:

{
    "id": 9,
    "title": "first test podcast",
    "metadata": "test metadata for first audio",
    "length": 13.25,
    "dateofbroadcast": "2015-05-11T11:05:52+01:00",
    "resourceURI": "http://127.0.0.1:80/Media/",
    "podcastfile": "sumith.mp3",
    "categories": "sports"
}

然后将此JSON正确添加到我的html视图

<ion-view view-title="Playlist">
    <ion-content>
        <ion-list>
            <ion-item>
                Title: {{items.title}}
                <br>Description: {{items.metadata}}
                <br>Length: {{items.length}} min
                <br>Category: {{items.categories}}
                <br>Date of Broadcast: {{items.dateofbroadcast}}
                <br>
                <br>
            </ion-item>
    </ion-content>
</ion-view>

在第二个控制器上,我得到了相同的JSON(按照按播客类别搜索时的要求),我试图渲染html页面,但是返回的JSON没有关联到视图和视图中即使返回JSON并且可以在chrome开发人员工具选项卡中看到它,我也看不到任何值

[{
   "id": 9,
    "title": "first test podcast",
    "metadata": "test metadata for first audio",
    "length": 13.25,
    "dateofbroadcast": "2015-05-11T11:05:52+01:00",
    "resourceURI": "http://127.0.0.1:80/Media/",
    "podcastfile": "sumith.mp3",
    "categories": "sports"
}]

现在唯一值得注意的区别是[]包围了我的JSON,但我不确定为什么会导致问题?

只需添加后端API就是Sinatra:

get '/podcasts/:id' do
    @recent_podcasts = Podcasts.get(params[:id])
    @recent_podcasts.to_json
    #erb :podcasts
end


get '/podcasts/categories/:categories' do

    @recent_podcasts = Podcasts.all(:categories.like => "%"+params[:categories]+"%")

    @recent_podcasts.to_json
    #erb :podcasts

    #@contact.to_json
    #@podcast_filename = params[:podcastfilei
end

很抱歉写这么久但我想我也是

1 个答案:

答案 0 :(得分:0)

Agrhhhhhh !!!!甚至不打扰家伙,我意识到自己的愚蠢。

URL get'/ podcasts /:id'do总是只返回一个JSON但是

获取'/ podcasts / categories /:categories'会返回多个所以[]确实有意义添加到我的痛苦:) :)我没有

<ion-item ng-repeat="items in items">     在我看来,

所以视图需要分离,一个应该有重复,一个不应该......并且解决它