关于 AngularJS 中的 javascript:ui-route 显示空白页面


ui-route in AngularJS showing empty page

我正在尝试按照本教程学习 AngularJS：https://thinkster.io/mean-stack-tutorial。

我在它说"创建新评论"之前就开始了。我遇到的问题是，当我单击"评论"时，会出现一个只有一条水平线的空白页面。

我的理解是帖子的标题应该在两条虚假评论的顶部。这是我的代码：

index.html:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<!DOCTYPE html>
<html>
    <head>
        Flapper News

        <!-- BOOTSTRAP -->
        <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">

        <!-- ANGULARJS -->
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js">
        <script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js">
        <script src="app.js">

        <style> .glyphicon-thumbs-up { cursor:pointer } </style>
    </head>

    <body ng-app="flapperNews" style="padding: 50px">
       
           
                <ui-view></ui-view>
           
       

        <!-- Inline home template -->
        <script type="text/ng-template" id="/home.html">
           
                Flapper News
           

            <!-- Show all the posts -->
           

               
                   
                        <span class="glyphicon glyphicon-thumbs-up" ng-click="incrementUpvotes(post)"></span>
                        {{post.upvotes}}
                   

                   
                        <span style="font-size:20px;">
                            {{post.title}}
                            <span ng-hide="post.link">{{post.title}}</span>
                        </span>

                        <br />
                        <span style="font-size: 12px;">
                            Comments l
                            Share
                        </span>
                   
               
           

            <!-- Form to make new posts -->
            <form ng-submit="addPost()" style="margin-top:30px;">
                Add New Post

               
                    <input type="text" class="form-control" placeholder="Title" ng-model="title" />
               
               
                    <input type="text" class="form-control" placeholder="Link" ng-model="link" />
               

                <button type="submit" class="btn btn-primary" ng-click="submit">Post</button>
            </form>
       

        <!-- Inline Posts section -->
        <script type="text/ng-template" id="/posts.html">

            <!-- Display title as header -->
           
               
                    {{post.title}}
                    <span ng-hide="post.link">{{post.title}}</span>
               
           

            <!-- Display the comment -->
           
                <span class="glyphicon glyphicon-thumbs-up" ng-click="incrementUpvotes(comment)"></span>
                {{comment.upvotes}} - by {{comment.author}}
                <span style="font-size:20px; margin-left:10px;">{{comment.body}}</span>
           
       
    </body>
</html>

app.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
var app = angular.module('flapperNews', ['ui.router']);

app.factory('posts', [function() {
    var o = {
        posts: []
    };

    return o;
}]);

app.config([
    '$stateProvider',
    '$urlRouterProvider',

    function($stateProvider, $urlRouterProvider) {
        $stateProvider
        .state('home', {
            url: '/home',
            templateUrl: '/home.html',
            controller: 'MainCtrl'
        });

        $stateProvider
        .state('posts', {
            url: '/posts/{id}',
            templateUrl: '/posts.html',
            controller: 'PostsCtrl'
        });

        $urlRouterProvider.otherwise('home');
}]);

app.controller('MainCtrl', ['$scope', 'posts', function($scope, posts) {
    $scope.posts = posts.posts;

    $scope.addPost = function() {
        if(!$scope.title || $scope.title === '') {
            return;
        }

        $scope.posts.push({
            title: $scope.title,
            link: $scope.link,
            upvotes: 0,
            comments: [
                {author: 'Joe', body: 'Cool Post!', upvotes: 0},
                {author: 'Bob', body: 'Great idea but no!', upvotes: 0}
            ]});

        $scope.title = '';
        $scope.link = '';
    };

    $scope.incrementUpvotes = function(post) {
        post.upvotes += 1;
    }

}]);

app.controller('PostsCtrl', [
    '$scope',
    '$stateParams',
    'posts',
    function($scope, $stateParams, posts) {
        $scope.posts = posts.posts['$stateParams.id'];
}]);

我不确定我做错了什么让它什么都不显示。任何帮助将不胜感激，谢谢！

控制台错误：

The character encoding of the HTML document was not declared. The document will render with garbled text in some browser configurations if the document contains characters from outside the US-ASCII range. The character encoding of the page must be declared in the document or in the transfer protocol.

Use of getPreventDefault() is deprecated. Use defaultPrevented instead.

相关讨论

由于多个问题，您的代码将无法运行：
1. 您没有将 addPosts() 中的任何 id 属性添加到您的 posts 中，而是在访问 posts.posts['$stateParams.id'] 时期望它。

  • 在注释模板中，当您在控制器中声明 $scope.posts 时，您正在使用 post。

    • 我创建了一个 jsbin 来添加 id 属性并修复其他问题，它现在可以工作了。