草庐IT

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

codeneng 2023-03-28 原文

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.

  • 似乎是路径问题或配置问题。能不能放个简单的plnkr
  • 您是否在控制台中收到错误
  • 以前从来没有用过plnkr，打算把它放在那里。我在 OP 中发布了错误。
  • @Gary对不起，似乎无法在 plnker 中显示任何内容。不知道我做错了什么。
  • 是浏览器的问题吗？当我点击"评论"时，我仍然得到一个空白页。

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

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

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

    javascriptAngularJSspannbspclassangularjshtml

    有关关于 AngularJS 中的 javascript:ui-route 显示空白页面的更多相关文章

    1. ruby - 如何从 ruby​​ 中的字符串运行任意对象方法？ - 2

      总的来说，我对ruby​​还比较陌生，我正在为我正在创建的对象编写一些rspec测试用例。许多测试用例都非常基础，我只是想确保正确填充和返回值。我想知道是否有办法使用循环结构来执行此操作。不必为我要测试的每个方法都设置一个assertEquals。例如:describeitem,"TestingtheItem"doit"willhaveanullvaluetostart"doitem=Item.new#HereIcoulddotheitem.name.shouldbe_nil#thenIcoulddoitem.category.shouldbe_nilendend但我想要一些方法来使用

    2. ruby - 其他文件中的 Rake 任务 - 2

      我试图在一个项目中使用rake，如果我把所有东西都放到Rakefile中，它会很大并且很难读取/找到东西，所以我试着将每个命名空间放在lib/rake中它自己的文件中，我添加了这个到我的rake文件的顶部:Dir['#{File.dirname(__FILE__)}/lib/rake/*.rake'].map{|f|requiref}它加载文件没问题，但没有任务。我现在只有一个.rake文件作为测试，名为“servers.rake”，它看起来像这样:namespace:serverdotask:testdoputs"test"endend所以当我运行rakeserver:testid时

    3. ruby-on-rails - Ruby net/ldap 模块中的内存泄漏 - 2

      作为我的Rails应用程序的一部分，我编写了一个小导入程序，它从我们的LDAP系统中吸取数据并将其塞入一个用户表中。不幸的是，与LDAP相关的代码在遍历我们的32K用户时泄漏了大量内存，我一直无法弄清楚如何解决这个问题。这个问题似乎在某种程度上与LDAP库有关，因为当我删除对LDAP内容的调用时，内存使用情况会很好地稳定下来。此外，不断增加的对象是Net::BER::BerIdentifiedString和Net::BER::BerIdentifiedArray，它们都是LDAP库的一部分。当我运行导入时，内存使用量最终达到超过1GB的峰值。如果问题存在，我需要找到一些方法来更正我的代

    4. ruby - i18n Assets 管理/翻译 UI - 2

      我正在使用i18n从头开始​​构建一个多语言网络应用程序，虽然我自己可以处理一大堆yml文件，但我说的语言(非常)有限，最终我想寻求外部帮助帮助。我想知道这里是否有人在使用UI插件/gem(与django上的django-rosetta不同)来处理多个翻译器，其中一些翻译器不愿意或无法处理存储库中的100多个文件，处理语言数据。谢谢&问候，安德拉斯(如果您已经在ruby​​onrails-talk上遇到了这个问题，我们深表歉意) 最佳答案 有一个rails3branchofthetolkgem在github上。您可以通过在Gemfi

    5. ruby-on-rails - Rails 3 中的多个路由文件 - 2

      Rails2.3可以选择随时使用RouteSet#add_configuration_file添加更多路由。是否可以在Rails3项目中做同样的事情？ 最佳答案 在config/application.rb中:config.paths.config.routes在Rails3.2(也可能是Rails3.1)中，使用:config.paths["config/routes"] 关于ruby-on-rails-Rails3中的多个路由文件，我们在StackOverflow上找到一个类似的问题

    6. ruby-on-rails - Rails 编辑表单不显示嵌套项 - 2

      我得到了一个包含嵌套链接的表单。编辑时链接字段为空的问题。这是我的表格:Editingkategori{:action=>'update',:id=>@konkurrancer.id})do|f|%>'Trackingurl',:style=>'width:500;'%>'Editkonkurrence'%>|我的konkurrencer模型:has_one:link我的链接模型:classLink我的konkurrancer编辑操作:defedit@konkurrancer=Konkurrancer.find(params[:id])@konkurrancer.link_attrib

    7. ruby - 解析 RDFa、微数据等的最佳方式是什么，使用统一的模式/词汇(例如 schema.org)存储和显示信息 - 2

      我主要使用Ruby来执行此操作，但到目前为止我的攻击计划如下:使用gemsrdf、rdf-rdfa和rdf-microdata或mida来解析给定任何URI的数据。我认为最好映射到像schema.org这样的统一模式，例如使用这个yaml文件，它试图描述数据词汇表和opengraph到schema.org之间的转换:#SchemaXtoschema.orgconversion#data-vocabularyDV:name:namestreet-address:streetAddressregion:addressRegionlocality:addressLocalityphoto:i

    8. ruby-on-rails - Rails - 一个 View 中的多个模型 - 2

      我需要从一个View访问多个模型。以前，我的links_controller仅用于提供以不同方式排序的链接资源。现在我想包括一个部分(我假设)显示按分数排序的顶级用户(@users=User.all.sort_by(&:score))我知道我可以将此代码插入每个链接操作并从View访问它，但这似乎不是“ruby方式”，我将需要在不久的将来访问更多模型。这可能会变得很脏，是否有针对这种情况的任何技术？注意事项:我认为我的应用程序正朝着单一格式和动态页面内容的方向发展，本质上是一个典型的网络应用程序。我知道before_filter但考虑到我希望应用程序进入的方向，这似乎很麻烦。最终从任何

    9. ruby-on-rails - Rails 3.2.1 中 ActionMailer 中的未定义方法 'default_content_type=' - 2

      我在我的项目中添加了一个系统来重置用户密码并通过电子邮件将密码发送给他，以防他忘记密码。昨天它运行良好(当我实现它时)。当我今天尝试启动服务器时，出现以下错误。=>BootingWEBrick=>Rails3.2.1applicationstartingindevelopmentonhttp://0.0.0.0:3000=>Callwith-dtodetach=>Ctrl-CtoshutdownserverExiting/Users/vinayshenoy/.rvm/gems/ruby-1.9.3-p0/gems/actionmailer-3.2.1/lib/action_mailer

    10. ruby-on-rails - Rails 应用程序中的 Rails : How are you using application_controller. rb 是新手吗？ - 2

      刚入门rails，开始慢慢理解。有人可以解释或给我一些关于在application_controller中编码的好处或时间和原因的想法吗？有哪些用例。您如何为Rails应用程序使用应用程序Controller？我不想在那里放太多代码，因为据我了解，每个请求都会调用此Controller。这是真的？ 最佳答案 ApplicationController实际上是您应用程序中的每个其他Controller都将从中继承的类(尽管这不是强制性的)。我同意不要用太多代码弄乱它并保持干净整洁的态度，尽管在某些情况下ApplicationContr

    随机推荐