gpt4 book ai didi

javascript - Angularjs ngroute 数据不在第二页上

转载 作者:行者123 更新时间:2023-12-03 06:23:03 25 4
gpt4 key购买 nike

好吧,我是 Angular 的新手,为了测试我在 Codecademy 上获得的技能,我正在做一个音乐艺术家的测试网站。第一页是艺术家列表。当您单击其中一位艺术家的 block 时,它会在同一页面上加载该艺术家的信息。无论出于何种原因,第一页处理得很好,但第二页就有问题了。

模板加载正常(因为您可以确定页面样式元素的范围),但数据无法通过。它的大部分内容是空白的

我已经尝试了所有我能想到的方法,但还是无法让这个鸡蛋破裂。如果你们能帮忙,我将非常感激!下面有几个片段,但整个内容都在 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. 使用$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

关于javascript - Angularjs ngroute 数据不在第二页上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38777290/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com