Question

我在网站的一个部分使用动态路由，我正在使用ng-repeat显示项目列表。当某人点击某个特定项目时，其相应的内容将显示在新视图中。

这是代码的ng-repeat部分：

<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}}。

在Google 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="">

Answer 1

问题是在podcastController中定义了$scope.tracks，你在radioController中访问它，它不知道podcastController。您可以在podcastController中嵌套radioController，也可以将$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>

进入homeController并更新

<div ng-controller="homeController" class="{{pageClass}}">
    <div class="{{pageClass}}" ng-view ></div>
</div>

到

<template name = "AddArticle">
<div class = "content-container">
    <div class = "content-wrapper">
        <h2>Add new Article</h2>
        <!--{{> quickForm id="insertArticleForm" type = "insert"}}-->
        {{#autoForm collection="BlogPosts" id="insertArticleForm" type="insert" class = "content-form"}}
            <fieldset>
                {{> afQuickField name="author"}}
                {{> afQuickField name="title"}}
                {{> afQuickField name="description"}}
                {{> afQuickField name="content" rows=15 id = "content-textarea"}}
                <button type="submit" class="btn btn-primary">Insert</button>
            </fieldset>
        {{/autoForm}}
    </div>
</div>
{{> Preview}}

Answer 2

如果它实际上是将大括号输出到页面上，那通常是一个信号，表明你在某处错过了依赖。

检查index.html的标题以确保您的控制器，服务，工厂等都被加载：检查文件名，结构（子文件夹）等。还要检查拼写，大小写等，以确保。缺少的注射可能在某处。：）

Answer 3

很简单，scope.tracks没有在radioController中定义。错误消息告诉您查看第97行。非常确定如果您只是用虚拟数据替换$ scope.track，您的代码将起作用。

AngularJS

3 个答案: