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 个答案: