聊天应用程序输出中的错误-Angular.JS

Question

我正在学习MVA课程，该模块的目标是使用Angular JS构建聊天应用程序。 当讲师运行代码时，输出符合预期。

预期的输出：在输入字段中输入名称和消息时，输出应显示在上述输入字段中输入的名称和消息，以及单击按钮后它们输入数据的时间。

以下是代码：

HTML：

<html>
  <head>
    <title>Chirp</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
    <script src="javascripts/chirpApp.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="stylesheets/style.css">
  </head>
  <body ng-app="chirpApp">
    <div id='main' class="container" ng-controller="mainController">
      <div class="col-md-offset-2 col-md-8">
        <div class="clearfix">
          <form ng-Submit="post()">
            <input required type="text" class="form-control" placeholder="Your name" ng-model="newPost.created_by" /> 
            <textarea required class="form-control" maxlength="200" rows="3" placeholder="Say something" ng-model="newPost.text"></textarea>
            <input class="btn submit-btn pull-right" type="submit" value="Chirp!" />
          </form>
          <div id="post-stream">
            <h4>Chirp Feed</h4>
                <div class="post" ng-repeat="post in posts | orderBy:'created_at':true" ng-class-odd="'odd'" ng-class-even="'even'"> 
                  <p>{{post.text}}</p>
                <small>Posted by @{{post.created_by}}</small>
                <small class="pull-right">{{post.created_at | date:"h:mma 'on' MMM d, y"}}</small>
                </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

JavaScript的：

var app = angular.module('chirpApp', []);

app.controller('mainController', function($scope){
  $scope.posts = [];
  $scope.newPost = {created_by: '', text: '', created_at: ''};

  $scope.post = function(){
    $scope.newPost.created_at = Date.now();
    $scope.posts.push($scope.newPost);
    $scope.newPost = {created_by: '', text: '', created_at: ''};
  };
});

CSS：

body {
    padding-top:70px;
    width: 100%;
    height: 100%;
    width: 100%;
    height: 100%;
    font-family: "Source Sans Pro","Helvetica Neue",Helvetica,Arial,sans-serif;
}

a {
    color: #00B7FF;
}

.submit-btn {
    background-color: #b1dbff;
    margin: 10px 0 10px 0;
}

.post {
    padding: 10px;
    margin-bottom: 5px;
    border-radius: 5px;
}

.odd {
    background-color: #f2f9ff;

}
.even {
    background-color: #eceff3;
}

.form-auth {
    max-width: 330px;
    padding: 5px;
    margin: 0 auto;
}

该代码可从我的github帐户获得，我可以从该帐户复制粘贴代码，因此我认为代码没有问题。

当我打开页面时，将显示以下内容：

{{post.text}}由@ {{post.created_by}}发布{{post.created_at | 日期：“ h：mma在MMM d，y”}}

这不是所需的输出。

任何帮助，将不胜感激！

Answer 1

最初，当我尝试将代码粘贴复制到我自己的环境中时，它不起作用。 浏览后，我意识到对javascript和css文件的引用试图在不存在的文件夹中查找。 由于我创建了一个项目文件夹并将所有三个文件放入其中，因此我的引用如下：

Change
<script src="javascripts/chirpApp.js"></script>
<link rel="stylesheet" href="stylesheets/style.css">

To
<script src="chirpApp.js"></script>    
<link rel="stylesheet" href="style.css">

修复这两个问题后，它可以正常工作。 确保如果要复制代码，则文件名和文件夹结构相同，否则要复制的引用将不起作用。

Answer 2

页面上的输出表明posts数组为空。 这是因为ng-submit指令中的输入错误导致表单没有提交任何数据。 您应该在HTML文件中重构此行：

<form ng-Submit="post()">

对此：

<form ng-submit="post()">

这将注册ng-submit指令并启用表单提交数据。

聊天应用程序输出中的错误-Angular.JS

问题描述

2 个解决方案

解决方案1
1 已采纳 2016-02-02 19:32:05

解决方案2
0 2016-02-02 19:03:59

聊天应用程序输出中的错误-Angular.JS

问题描述

2 个解决方案

解决方案1 1 已采纳 2016-02-02 19:32:05

解决方案2 0 2016-02-02 19:03:59

解决方案1
1 已采纳 2016-02-02 19:32:05

解决方案2
0 2016-02-02 19:03:59