2016-08-04 5 views
0

Хорошо, я новичок в Angular и для проверки навыков, которые я получил в Codecademy, я занимаюсь тестированием музыкальных исполнителей. Первая страница - это список художников. Когда вы нажимаете на один из блоков исполнителей, он загружает информацию исполнителя на ту же страницу. По какой-то причине первая страница обрабатывается нормально, но вторая страница - проблема.Данные Angularjs ngroute не на второй странице

Шаблон нагрузка хорошо (так как вы можете сферу стилизованной элементы страницы), , но данные не проходит. Это, по большей части, пустое.

Я пробовал все, что я могу придумать, но я не могу получить это яйцо для взлома. Если вы, ребята, можете помочь, я буду супер мегаю! Есть несколько фрагментов ниже, но все это здесь, на 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: '/'}); 
}]); 

ответ

1

Для достижения ожидаемого результата, используйте ниже

  1. Зафиксировать параметр маршрута route, используя $routeParams.

    app.controller('ArtistController', ['$scope','$routeParams', function($scope,$routeParams)

  2. Используйте этот индекс и получить выбранный объект, используя ниже

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

  3. использования, что выбранный объект области видимости и отобразить его на второй странице

    <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

+0

Novaselic! Он работает, но видео по-прежнему не отображается. Как вы можете просмотреть видео на YouTube? – Agape

+0

@Agape youtube не работает из-за SCE (строгое контекстное экранирование) ... У меня есть обновленный код плункера, чтобы исправить это: https: //plnkr.co/edit/YxvCZUoaCn40vu9jEH6j? P = preview .. надеюсь, что это сработает для вас :) –

+0

Что фиксировало мои проблемы, @Naga, кто-нибудь когда-нибудь говорил вам, что вы прекрасны? Куда вы выбрали эти трюки? – Agape

Смежные вопросы