热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

关于AngularJS中的javascript:uiroute显示空白页面

ui-routeinAngularJSshowingemptypage我正在尝试按


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

       

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

       

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

           

       

       

        <script type="text/ng-template" id="/home.html">

           

                Flapper News

           

           

           

               

                   

                        <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 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">Postbutton>

            form>

       

       

        <script type="text/ng-template" id="/posts.html">

           

           

               

                    {{post.title}}

                    <span ng-hide="post.link">{{post.title}}span>

               

           

           

           

                <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.



相关讨论




  • 似乎是路径问题或配置问题。能不能放个简单的plnkr


  • 您是否在控制台中收到错误


  • 以前从来没有用过plnkr,打算把它放在那里。我在 OP 中发布了错误。


  • @Gary对不起,似乎无法在 plnker 中显示任何内容。不知道我做错了什么。


  • 是浏览器的问题吗?当我点击"评论"时,我仍然得到一个空白页。






由于多个问题,您的代码将无法运行:

1. 您没有将 addPosts() 中的任何 id 属性添加到您的 posts 中,而是在访问 posts.posts['$stateParams.id'] 时期望它。


  • 在注释模板中,当您在控制器中声明 $scope.posts 时,您正在使用 post。
  • 我创建了一个 jsbin 来添加 id 属性并修复其他问题,它现在可以工作了。






    推荐阅读
    author-avatar
    发出耀眼气息
    这个家伙很懒,什么也没留下!
    PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
    Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有