AngularJS中的动态路由问题
Issue with dynamic routing in AngularJS
我在网站的一个部分使用动态路由，在那里我使用ng repeat显示项目列表。当某人单击某个特定项目时，其相应的内容将显示在新视图中。
这是我的ng重复部分代码：
<input type="text" placeholder="SEARCH" ng-model="search" />
<div id="track-list" ng-repeat="track in tracks | filter:search">
<a ng-href="#/radio/{{$index}}"><h3 class="track-list-title">{{track.title}}</h3></a>
<p class="track-list-date">{{track.date | date}}</p>
</div>
这是主索引文件：
<!DOCTYPE html>
<html ng-app="mainApp">
<head lang="en">
<meta charset="utf-8">
<title>Playlife Project</title>
<!-- styles -->
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<!-- scripts -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28//angular-route.min.js"></script>
<script src="http://d2v52k3cl9vedd.cloudfront.net/plangular/3.1.0/plangular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<header>
<div id="logo"><a href="#/"><img src="img/logo.png" class="logo img-responsive" /></a></div>
<div id="nav" class="menu">
<ul>
<li class="menu-item"><a href="#/podcast">Podcast</a></li>
<li class="menu-item"><a href="#/record">Record Label</a></li>
<!--<li class="menu-item"><a href="#/live">Live Act</a></li>-->
<li class="menu-item"><a href="#/about">About</a></li>
<li class="menu-item"><a href="#/contact">Get In Touch</a></li>
<li class="menu-item"><a href="#">Shop</a></li>
<li class="mobile-menu-item"><i class="fa fa-2x fa-bars"></i></li>
</ul>
</div>
<div id="drawer" class="mobile-menu">
<ul>
<li><a href="#/podcast">Podcast</a></li>
<li><a href="#/record">Record Label</a></li>
<li><a href="#/live">Live Act</a></li>
<li><a href="#/contact">Get In Touch</a></li>
</ul>
</div>
</header>
<div ng-controller="homeController" class="{{pageClass}}" ng-view ></div>
<footer>
<div id="subscribe">
<form name="newsletter">
<input class="inp" type="email" name="email" id="email" placeholder="Be a part of the journey">
<input class="button" type="button" name="button" id="button" value="GET ON BOARD">
</form>
</div>
<div id="social">
<ul class="social-icons">
<li><a href="" target="_blank"><img src="img/facebook.png" /></a></li>
<li><a href="" target="_blank"><img src="img/soundcloud.png" /></a></li>
<li><a href="" target="_blank"><img src="img/twitter.png" /></a></li>
<li><a href="" target="_blank"><img src="img/youtube.png" /></a></li>
<li><a href="" target="_blank"><img src="img/instagram.png" /></a></li>
</ul>
</div>
</footer>
<script type="text/javascript" src="script/main.js"></script>
<script type="text/javascript" src="script/script.js"></script>
</body>
</html>
这是主要的应用程序：
var mainApp = angular.module("mainApp", ['ngRoute', 'ngAnimate', 'plangular']);
/* page routing */
mainApp.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/home.html',
controller: 'homeController'
})
.when('/podcast', {
templateUrl: 'views/podcast.html',
controller: 'podcastController'
})
.when('/radio/:id', {
templateUrl: 'views/radio.html',
controller: 'radioController'
})
.when('/record', {
templateUrl: 'views/record.html',
controller: 'recordController'
})
.when('/about', {
templateUrl: 'views/about.html',
controller: 'aboutController'
})
/*.when('/live', {
templateUrl: 'views/live.html',
controller: 'liveController'
})*/
.when('/contact', {
templateUrl: 'views/contact.html',
controller: 'contactController'
})
.otherwise({
redirectTo: '/'
});
})
/* player */
.config(function(plangularConfigProvider){
plangularConfigProvider.clientId = 'f39fd2f8db018982adef87c3ecd63e7a';
})
/* home controller */
.controller('homeController', function($scope, $timeout) {
$scope.pageClass = 'page page-home';
var INTERVAL = 5000, slides =[{head:"PLAY LIFE PROJECT", btn:'Listen to Playlife Podcast #002', link:'#', src:"./img/slide-1.jpg"},
{head:"SUBMIT YOUR TRACKS TO GET FEATURED ON PLAY LIFE RECORDS", btn:'Submit your track', link:'#', src:"./img/slide-2.jpg"},
{head:"PLAY LIVE CONNECT IS COMING NEAR YOU", btn:'Check Events', link:'#', src:"./img/slide-3.jpg"},
{head:"LISTEN TO PLAY LIVE PODCAST", btn:'Listen', link:'#', src:"./img/slide-4.jpg"}];
function setCurrentSlideIndex(index) {
$scope.currentIndex = index;
}
function isCurrentSlideIndex(index) {
return $scope.currentIndex === index;
}
function nextSlide() {
$scope.currentIndex = ($scope.currentIndex < $scope.slides.length - 1) ? ++$scope.currentIndex : 0;
$timeout(nextSlide, INTERVAL);
}
function loadSlides() {
$timeout(nextSlide, INTERVAL);
}
$scope.slides = slides;
$scope.currentIndex = 0;
$scope.setCurrentSlideIndex = setCurrentSlideIndex;
$scope.isCurrentSlideIndex = isCurrentSlideIndex;
loadSlides();
})
.controller('podcastController', ['$scope', function($scope) {
$scope.pageClass = 'page page-podcast';
$scope.tracks =[
{title:'Group Therapy 150 with Above & Beyond and Maor Levi', date: new Date(), link:'#'},
{title:'Group Therapy 151 with Above & Beyond and Martin Garrix', date: new Date(), link:'#'},
{title:'Group Therapy 152 with Above & Beyond and Grum', date: new Date(), link:'#'},
{title:'Group Therapy 153 with Above & Beyond and Andrew Bayer', date: new Date(), link:'#'},
{title:'Group Therapy 154 with Above & Beyond and Ilan Bluestone', date: new Date(), link:'#'},
{title:'Group Therapy 155 with Above & Beyond and Armin Van Buuren', date: new Date(), link:'#'},
{title:'Group Therapy 156 with Above & Beyond and Hardwell', date: new Date(), link:'#'}
]
}])
.controller('radioController', ['$scope', '$routeParams', function($scope, $routeParams) {
$scope.pageClass = 'page';
$scope.track=$scope.tracks[ $routeParams.id]
}])
.controller('recordController', function($scope) {
$scope.pageClass = 'page page-record';
})
.controller('aboutController', function($scope) {
$scope.pageClass = 'page-about';
})
/*
mainApp.controller('liveController', function($scope) {
$scope.pageClass = 'page-live';
});
*/
.controller('contactController', function($scope) {
$scope.pageClass = 'page page-contact';
});
当我点击这些项目时，它们会正确显示，它们会重定向到这个新视图，但它不会显示标题，我看到的只是{{track.title}}。
在检查谷歌Chrome的控制台时，我收到了这个错误：
TypeError: Cannot read property '4' of undefined
at new <anonymous> (http://localhost:63342/New%20website/script/main.js:97:31)
at d (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js:34:265)
at Object.instantiate (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js:34:394)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js:66:112
at link (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28//angular-route.min.js:7:248)
at J (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js:53:345)
at f (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js:46:399)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js:46:67
at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js:47:303
at u (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js:51:28) <div ng-controller="homeController" class="{{pageClass}} ng-scope" ng-view="">
问题是$scope.tracks是在podcastController中定义的，而您正在radioController中访问它，而radioCntroller不知道podcastControl。您可以在podcastController中嵌套radioController，也可以将$scope.tracks的初始化移动到homeController。
尝试移动
$scope.tracks =[
{title:'Group Therapy 150 with Above & Beyond and Maor Levi', date: new Date(), link:'#'},
{title:'Group Therapy 151 with Above & Beyond and Martin Garrix', date: new Date(), link:'#'},
{title:'Group Therapy 152 with Above & Beyond and Grum', date: new Date(), link:'#'},
{title:'Group Therapy 153 with Above & Beyond and Andrew Bayer', date: new Date(), link:'#'},
{title:'Group Therapy 154 with Above & Beyond and Ilan Bluestone', date: new Date(), link:'#'},
{title:'Group Therapy 155 with Above & Beyond and Armin Van Buuren', date: new Date(), link:'#'},
{title:'Group Therapy 156 with Above & Beyond and Hardwell', date: new Date(), link:'#'}
]
进入homeController并更新
<div ng-controller="homeController" class="{{pageClass}}" ng-view ></div>
至
<div ng-controller="homeController" class="{{pageClass}}">
<div class="{{pageClass}}" ng-view ></div>
</div>
如果它真的将大括号输出到页面上，那么这通常是一个信号，表明您在某个地方缺少了依赖项。
检查index.html的标题以确保您的控制器、服务、工厂等都已加载：检查文件名、结构（子文件夹）等。还要检查拼写、大小写等，以确保安全。缺少的注射可能在那里的某个地方。：）
非常简单，scope.tracks没有在radioController中定义。错误消息告诉您查看第97行。可以肯定的是，如果你只是用伪数据替换$scope.track，你的代码就会工作。
相关文章：
- 无法运行php代码，有角度路由问题
- 控制器操作的路由问题
- 有UI路由问题的角度路由
- Angular中的ajax调用和路由问题
- 自定义 Mod 文件夹的角度路由问题
- 基于 id 访问 url 时存在角度路由问题
- 表达 4 + 角度 2 HTML 5 路由问题
- Expressjs 动态路由问题
- ASP.NET MVC 4 路由问题
- 角度JS和动态路由问题
- AngularJs 路由问题
- AngularJS html5Mode 路由问题托管在 IIS 8.5 中
- ASP.Net MVC Razor - Javascript 函数路由问题
- 只有当我使用Mixin时，Ember才会导致路由问题.我该如何解决此问题
- Node.js在HTTP Rest开发过程中出现路由问题
- 主干路由问题
- Javascript(Jquery）调用MVC3 Controller/Action/ID的URL路由问题，返回404，
- Angular JS注入路由问题
- Angular JS路由问题
- AngularJS中的动态路由问题
