聊天应用输出错误 - 角度.JS
Error in the output of a chat app - Angular.JS
我正在学习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}} Posted by @{{post.created_by}} {{post.created_at | date:"h:mma 'on' MMM d, y"}}
这不是所需的输出。
任何这方面的帮助将不胜感激!
起初,当我尝试将代码复制粘贴到我自己的环境中时,它不起作用。浏览后,我意识到对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">
修复这两个问题后,它工作得很好。确保在复制代码时具有相同的文件名和文件夹结构,否则要复制的引用将不起作用。
页面上的输出指示posts
数组为空。这是因为由于ng-submit
指令中的拼写错误,表单未提交任何数据。您应该在 HTML 文件中重构此行:
<form ng-Submit="post()">
对此:
<form ng-submit="post()">
这将注册ng-submit
指令并启用表单提交数据。
相关文章:
- 角度 JS + 重定向不起作用
- 角度Js ng-disabled不起作用
- "未捕获的语法错误:意外的标记"角度JS
- 如何从角度 js 调用 javascript 方法
- 角度.js格式化 json 数据
- 如何在角度js的自动完成下拉列表中对项目列表(按字母顺序)进行排序
- 角度JS拼接不工作
- 角度js中无动作
- 基于输入框的角度JS计算
- 角度 JS - 显示/隐藏动态表的一些行
- 角度 js - 如何用鼠标单击,然后在 ng-grid 上按 Enter 键
- 在角度 JS 中打开特定列表
- 角度 JS 控制器未实例化
- 表单元素值更改后的角度 JS 验证
- 将焦点设置为输入元素角度 js
- 角度.js:38未捕获错误:[$injector:模块rr]
- 根据范围过滤角度.js数组
- (角度.js)如何通过过滤器计算数组中有多少项目
- 角度 JS 动态选项卡字段
- 角度.js - 识别通过路由或 ng 控制器调用的控制器