AngularJS ngroute数据不在第二页上

Question

好的，我是Angular的新手，为了测试我在Codecademy上获得的技能，我正在测试音乐艺术家。 第一页是艺术家列表。 当您单击某个艺术家的图块时，它将在同一页面上加载该艺术家的信息。 无论出于何种原因，第一页都可以正常工作，但是第二页就是问题所在。

模板可以加载 （因为您可以确定页面的样式元素的范围）， 但是数据不会通过。 在大多数情况下，它是空白的 。

我已经尽力想尽一切办法，但是我无法打破这个鸡蛋。 如果你们能提供帮助，我将成为超级超级！ 下面有几个摘要，但整个过程都在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: '/'});
}]);

Answer 1

为了达到预期的效果，请在下面使用

使用$routeParams捕获路由参数索引。
app.controller('ArtistController', ['$scope','$routeParams', function($scope,$routeParams)
使用该索引并通过以下使用获取所选对象
$scope.currentArtist = $scope.artists[$routeParams.artistsId]

使用该选定的范围对象并将其显示在第二页上

 <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

AngularJS ngroute数据不在第二页上

问题描述

1 个解决方案

解决方案1
1 已采纳 2016-08-04 21:25:20

AngularJS ngroute数据不在第二页上

问题描述

1 个解决方案

解决方案1 1 已采纳 2016-08-04 21:25:20

解决方案1
1 已采纳 2016-08-04 21:25:20