Angularjsのデータが2番目のページに表示されない

私はAngularの新人です。私がCodecademyに持っているスキルをテストするために、私は音楽アーティストのテストサイトをやっています。最初のページはアーティストのリストです。アーティストのブロックの1つをクリックすると、アーティストの情報が同じページに読み込まれます。何らかの理由で、最初のページは正常に処理されますが、2番目のページが問題です。Angularjsのデータが2番目のページに表示されない

大丈夫（スコープページのスタイル要素をすることができるので）テンプレートをロード、が、データが通過しません。ほとんどの場合、空白です。です。

私は考えることができるすべてを試しましたが、私はこの卵に亀裂を入れることはできません。皆さんが助けてくれるなら、私は素晴らしいメガバイトになるでしょう！そこ下記のスニペットのカップルがありますが、全体のことはplunkerにここにある：https://plnkr.co/edit/67DAyg8ApyNYgVwvvlyw?p=info

HTML：

<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js" type="text/javascript"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-resource.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js" type="text/javascript"></script> 
</head> 

<body> 
    <div class="main"> 
     <div class="container"> 
     <div ng-view></div> 
     </div> 
    </div> 
    <!-- Modules --> 
    <script src="app.js" type="text/javascript"></script>  
    <!-- Controllers --> 
    <script src="ArtistController.js" type="text/javascript"></script>  
</body>

Javascriptを：

var app = angular.module('FavArtistsApp', ['ngRoute']); 

app.config(['$routeProvider', function ($routeProvider) { 
    $routeProvider.when('/', {templateUrl: 'Mural.html', controller: 'ArtistController'}) 
    $routeProvider.when('/:artistsId', {templateUrl: 'Artist.html', controller: 'ArtistController'}); 
    $routeProvider.otherwise({redirectTo: '/'}); 
}]);

出典

2016-08-04 Agape

期待される結果を達成するために、

$routeParamsを使用して、ルートパラメータインデックスをキャプチャします。

app.controller('ArtistController', ['$scope','$routeParams', function($scope,$routeParams)
そのインデックスを使用して、スコープのオブジェクトを選択し

$scope.currentArtist = $scope.artists[$routeParams.artistsId]

使用下に使用して、選択したオブジェクトを取得し、2番目のページ

<a class="button back" href="#/">Back</a> 

<h2 class="artist-name">{{currentArtist.name}}</h2> 
<p class="debut">Their debut album dropped in {{currentArtist.debutYear}}</p> 
<p class="album">Favorite album:<br/> 
    <img ng-src="{{currentArtist.albumCover}}" height="300" width="300"/><br/> 
{{currentArtist.favoriteAlbum}}</p> 
<div> 
    <iframe width="560" height="315" ng-src="{{currentArtist.track}}" frameborder="0" allowfullscreen></iframe> 
</div> 
<p class="bio">{{currentArtist.bio}}</p>

を上に表示

https://plnkr.co/edit/YxvCZUoaCn40vu9jEH6j?p=preview

出典

2016-08-04 21:25:20

Novaselic！それは動作しますが、ビデオはまだ表示されません。 YouTubeの動画をどのように表示させるのですか？ – Agape

@Agape youtubeはSCE（Strict Contextual Escaping）のために動作していません... https：//plnkr.co/edit/YxvCZUoaCn40vu9jEH6j？p = preview ..これを修正するプランナーコードを更新しました:) –

これは私の問題を修正した、@ナガ、誰もあなたが美しいと言うことは？あなたはそれらのトリックをどこで選んだのですか？ – Agape

Angularjsのデータが2番目のページに表示されない

答えて

関連する問題