个人中心
gpt4 book ai didi

javascript - 基本 Javascript 显示效果不佳(堆栈平均值)

转载 作者：行者123 更新时间：2023-12-03 06:38:36 25 4
gpt4 key购买 nike

这将是一个关于我遇到的问题的非常基本的问题。在我想做的工作中没有什么特别困难的，但我真的不明白为什么它不起作用，因为我的代码与 AngularJS 文档中的一些示例几乎相同。

所以这里是:我正在尝试创建一个基本网站来娱乐自己使用 Mean Stack 进行开发)。我只做了一个index.html页面:

<!DOCTYPE hmtl>

<html class="ng-scope" ng-app="">

<head>

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">

<title>PreBoot</title>


<!-- Bootstrap import -->
<link href="./bootstrap.min.css" rel="stylesheet">

<!-- just a little CSS -->
<style>
body {
    padding-top: 70px;
    /* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
}
</style>
</head>    
    <body ng-app="preBoot">
<div id='main'> 
<!-- Navigation -->
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-    toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">PreBoot</a>
        </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li>
                    <a href="">About</a>
                </li>
                <li>
                    <a href="#">Services</a>
                </li>
                <li>
                    <a href="#">Contact</a>
                </li>
            </ul>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container -->
</nav>

<!-- Page Content -->
<div class="container">

    <div class="row">
        <div class="col-lg-12 text-center">
            <h1> PreBoot </h1>
            <p class="lead">zqesiediuhzsbadehzdebshobsezd</p>
            <form ng-submit="post()" ng-controller="mainController">
                <input required type="text" placeholder="Your name" ng-model="newPost.created_by"/>
                <textarea required maxLength="200" rows="3" placeholder="Say something" ng-model="newPost.text"></textarea>
                <input class="button" type="submit" value="Preboot that!"/>
            </form>
            <div id="post-stream">



   <!--  INTERESTING PART  !!!!!!!! --> 



                <h4> PreBoot Feed</h4>

                    <div class='post' ng-repeat="post in posts" ng-class-odd="'odd'" ng-class-even="'even'">
                        <p> {{post.text}} </p>
                    </div> 
            </div>

      <!-- END OF IT !!!!! -->


          <!-- <ul class="list-unstyled">
                <li>Bootstrap v3.3.6</li>
                <li>jQuery v1.11.1</li>
            </ul> -->

        </div>
    </div>
    <!-- /.row -->

</div>
<!-- /.container -->
</div>


        <!-- JScript imports --> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script type="text/javascript" src="./preBoot.js"></script> 

<!-- jQuery Version 1.11.1 -->
<script type="text/javascript" src="./jquery.js"></script>

<!-- Bootstrap Core JavaScript -->
<script type="text/javascript" src="./bootstrap.min.js"></script>

这就是 HTML 页面，有趣的部分已被通知。我使用如下的 server.js 文件:

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

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: ''};
};


});

最后，我使用通过 node.js 邀请命令运行的 server.js 文件运行所有内容。

var express = require('express');
var path = require('path');

var app = express();

app.use(express.static(__dirname));

app.get('/', function(req, res) {
res.sendFile('./index.html');
});

// Allow the error 404 selection

/* app.use(function(req, res, next){
res.setHeader('Content-Type', 'text/plain');
res.send(404, 'Page introuvable !');
}); */

app.listen(8081);

为了简单起见，我暂时将每个文件放在同一个文件夹中，因此所有内容(每个 ccs 和 js 文件都在我的 html 的同一个文件夹中)。运行该程序时我得到的是:

My screenshoot

这几乎是我想要的，除了当我输入某些内容时，文本没有出现，这对我来说没有任何意义。

我之前在与我的index.html文件位于同一位置的node_module文件夹中正确安装了npm express。

很抱歉打扰这个无趣的问题，我花了几个小时尝试解决该问题，并又在已经提出的问题中寻找任何解决方案，但我发现的所有内容都没有解决问题。

注意:我在 Windows 上工作。

最佳答案

主要问题是你已经定义了

ng-app=""

并且您已在 preBoot 应用程序上定义了 Controller 

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

app.controller('mainController', function($scope){

像这样定义 Controller 

function mainController($scope){

或定义 ng-app="preBoot"

其他错误是

您的 Controller 仅限于表单

<form ng-submit="post()" ng-controller="mainController">
                <input required type="text" placeholder="Your name" ng-model="newPost.created_by"/>
                <textarea required maxLength="200" rows="3" placeholder="Say something" ng-model="newPost.text"></textarea>
                <input class="button" type="submit" value="Preboot that!"/>
            </form>

此代码超出了 Controller 范围

<div class='post' ng-repeat="post in posts" ng-class-odd="'odd'" ng-class-even="'even'">
                        <p> {{post.text}} </p>
                    </div>

我确实缩短了你的代码并制作了一个jsfiddle。工作正常。核实 https://jsfiddle.net/Lt7aP/2926/

在 jsfiddle 代码中将 ng-app="preBoot" 更新为 ng-app="" 您将收到错误 Argument 'mainController' is not a函数，未定义

关于javascript - 基本 Javascript 显示效果不佳(堆栈平均值)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38076326/

25 4 0
文章推荐： javascript - jQuery fadeIn() 位于 if 和 else 之间
文章推荐： javascript - Chart.js 加载新数据
文章推荐： javascript - Angular2 + Webpack : how to optimise vendor bundle
文章推荐： javascript - d3 ClipPath - 为什么它会切断图表顶部？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com