javascript - 实时网站不显示特定的 angularjs 指令(但显示其他指令)-6ren

javascript - 实时网站不显示特定的 angularjs 指令(但显示其他指令)

转载作者：行者123 更新时间：2023-11-28 18:47:06

我一直在开发一个网站，目的是为了好玩，目的是学习 Angular。本地运行没有问题；一切都按计划进行。但现在我把它放到网上，其中一个指令没有显示(登录框)。

网站应该是: http://s23.postimg.org/7gzolivgr/Screenshot_9.png在线时的样子: http://s29.postimg.org/bnqtle713/Screenshot_8.png代码如下(指令位于 body 标记下方两行)

Index.html

<!DOCTYPE html>
<html data-ng-app="mMain">
<head>
    <!-- css references -->
    <link href="app/bootstrap/css/bootstrap.css" rel="stylesheet" />
    <link href="app/css/style.css" rel="stylesheet" />
    <link href="partials/partials_styling/home.css" rel="stylesheet" />
    <link href="partials/partials_styling/register.css" rel="stylesheet" />
    <link href="app/directives/header-anchor/header-anchor.css" rel="stylesheet" />
    <link href="app/directives/header-login/header-login.css" rel="stylesheet" />
    <link href="app/directives/header-choose-type/header-choose-type.css" rel="stylesheet" />
    <link href="partials/partials_styling/be_a_fail.css" rel="stylesheet" />
    <link href="app/directives/search-bar/search-bar.css" rel="stylesheet" />
        <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <meta content="utf-8" http-equiv="encoding">
    <title>angular test</title>
</head>
<body>
    <div d-header-anchor class="header-anchor"></div>
    <div d-header-login class="header-login">
    </div>
    <div d-header-choose-type></div>
    <!--<div d-search-bar></div>-->


    <div class="container_main">
        <!-- placeholder views -->
        <data-ng-view></data-ng-view>
    </div>

    <script src="app/js/jquery-1.11.3.js"></script>
    <script src="app/js/jquery.validate.js"></script>
    <script src="app/js/validation.js"></script>
    <script src="app/js/angular.js"></script>
    <script src="app/js/angular-ui-router.js"></script>
    <script src="app/js/angular-route.js"></script>
    <script src="app/js/script.js"></script>
    <script src="app/directives/header-anchor/header-anchor.js"></script>
    <script src="app/directives/header-login/header-login.js"></script>
    <script src="app/directives/header-choose-type/header-choose-type.js"></script>
    <script src="app/directives/search-bar/search-bar.js"></script>
</body>
</html>

指令HTML

<div class="container_header-login">
    <div data-ng-if="!login[0].loggedin">

        <form ng-submit="confirm()">
            <input type="text" ng-model="username.name" placeholder="username" />
            <input type="password" ng-model="password.pass" placeholder="password" />
            <br />
            <input type="submit" class="btn btn-primary" value="Login" />
            <div ng-show="wrongUserOrPass" class="errorMessage">Incorrect username or password</div>
        </form>

        <!--<input type="text" ng-model="username.name"></input>
        <input type="button" ng-click="btn()"></input>-->
        <a href="#/register">Register</a>
    </div>
    <div data-ng-if="login[0].loggedin" class="loggedInMessage">
        <p>Logged in as  </p><a href="#/user_info">{{login[0].username}}</a>
    </div>
</div>

.JS

var mHeaderLogin = angular.module('app.directives.mHeaderLogin', [])// mMain-dependent due to factory call
mHeaderLogin.directive('dHeaderLogin', fHeaderLogin);
function fHeaderLogin() {
    return {
        restrict: 'A',
        templateUrl: 'app/directives/header-Login/header-Login.html',
        controller: function ($scope, mainFactory) {
            //$scope.loggedin = false; 
            $scope.login = mainFactory.getLogin(); //default view; user not logged in
            $scope.iUser = 999;
            //console.log($scope.iUser);
            $scope.username = { name: "" }; 
            $scope.password = { pass: "" };
            $scope.wrongUserOrPass = false; //error message upon wrong username or password match
            $scope.users = mainFactory.getUsers(); //move to function?
            $scope.logins = mainFactory.getLogins();
            //console.log($scope.users);
        },
        link: function (scope, element, attrs) {
            scope.confirm = function () {//checking for username and password match
                for (var i = 0, len = scope.users.length; i < len; i++) {
                    if (scope.users[i].name === scope.username.name)//true if input username match existing user name
                    {
                        for (var j = 0, len = scope.logins.length; j < len; j++) {
                            if (scope.logins[j].ref_id_user === scope.users[i].id_user) {//check password
                                if (scope.logins[j].password === scope.password.pass) { //if passed, user is logged in
                                    //scope.iUser = i;
                                    scope.login[0].username = scope.users[i].name;
                                    scope.login[0].ref_id_user = scope.users[i].id_user;
                                    scope.login[0].loggedin = true;
                                    console.log(scope.login[0].loggedin);
                                    console.log(scope.login[0].username);
                                    console.log(scope.login[0].ref_id_user);
                                    return;
                                }
                            }
                        }
                    }
                }//case no match was found
                scope.wrongUserOrPass = true;
                //alert("username or password incorect"); //case no match
                return;
            }
        }
    }
}

CSS

.header-login{
    position:absolute;
    top: 1%;
    right: 1%;
    width: 200px;
    height: 200px;
    text-align: center; 
    z-index: 2;
}
.header-login a{
    font-size: 10px;
}
.container_header-login{
    position: relative;
    width: 100%;
}
.container_header-login input, button {
    width: 100%;
    padding: 0;
}
.errorMessage{
    color: red;
    font-size: 12px;
}
.loggedInMessage *{
    font-size: 14px;
    display: inline;
}
.loggedInMessage a{
    font-size: 14px;
    text-decoration: underline;
    display: inline;
}

最佳答案

在此脚本路径中，您已指定:

<script src="app/directives/header-login/header-login.js"></script>

在模板 HTML 文件的路径中，您已指定:

templateUrl: 'app/directives/header-Login/header-Login.html',

请注意，header-login 和 header-Login 不是同一件事。

从您的屏幕截图来看，您的本地环境似乎在 Windows 下运行，它具有不区分大小写的文件系统。不过，我敢打赌，您托管真实站点的服务器是基于 Unix 的操作系统，这是一个区分大小写的文件系统。

此外，Chrome 开发工具也是您的 friend :

这会告诉您它找不到模板。

关于javascript - 实时网站不显示特定的 angularjs 指令(但显示其他指令)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35119663/

文章推荐： python - 如何保存 session 数据(Python)

文章推荐： python - Django:不可散列类型: 'list'

文章推荐： python - 在 PyGame 中混合 per-alpha 和颜色键的解决方法

performance - 实时，低延迟声音合成和快速处理的语言？
Closed. This question is opinion-based。它当前不接受答案。想改善这个问题吗？更新问题，以便editing this post用事实和引用来回答。 2年前关闭。
javascript - 如何在我的网站中获取用户在线状态(实时)
我想显示我的网站上所有用户都在线(实时；就像任何聊天模块一样)。我正在使用下面提到的脚本来执行此操作。 HTML: Javascript: var doClose = false; documen
Algolia 实时 Webhooks
有什么方法可以知道 Algolia 何时成功处理了排队作业，或者与上次重新索引相比，Algolia 是否索引了新文档？我们希望建立一个系统，每当新文档被索引时，浏览网站的用户都会收到实时更新警告，并
Java - 网络应用程序 - 实时
构建将在“桌面”而不是浏览器中运行的 Java 应用程序的推荐策略是什么。该应用程序的特点是: 1. Multiple application instances would be running o
iphone - 离线时特定时区的iOS“实时”
这是场景: 我正在编写一个医疗相关程序，可以在没有连接的情况下使用。当采取某些措施时，程序会将时间写入CoreData记录。这就是问题所在，如果他们的设备将时间设置为比实际时间早的时间。那将是一个大
Jquery 可拖动/实时
我有: $(document).ready(function () { $(".div1, .div2, .div3, .div4, .div5").draggable();
JQuery:实时标记第二次部分工作
我有以下 jquery 代码: $("a[id*='Add_']").live('click', function() { //Get parentID to add to. var
html - 如何在jsp页面文本区域显示tomcat登录(实时)？
我有一个 jsp 文件，其中包含一个表单。提交表单会调用处理发送的数据的 servlet。我希望当我点击提交按钮时，一个文本区域被跨越并且应该实时显示我的应用程序的日志。我正在使用 Tomcat 7。
c# - 更新页面中的文本框(实时)
我编辑了我的问题，我在 Default.aspx 页面中有一个提交按钮和文本框。我打开两个窗口Default.aspx。我想在这个窗口中向文本框输入文本并按提交，其他窗口将实时更新文本框。请帮助我!
javascript - 如何监控用户在线状态(实时)
我用 php 创建了一个小型 CMS，如果其他用户在线或离线，我想显示已登录的用户。目前，我只创建一个查询请求，但这不会一直更新。我希望用户在发生某些事情时立即看到更改。我正在寻找一个类似于 fac
c++ - *实时*访问光盘文件中的数据
我有以下问题需要解决。我必须构建一个图形查看器来查看海量数据集。我们有一些特定格式的文件，其中包含数百万条代表实验结果的记录。每条记录代表大图上的一个样本点。我见过的最大的文件有 4370 万条记录
php - 检查用户当前是否在线(实时)
我最近完成了申请，但遇到了一个大问题。我一次只需要允许 1 个用户访问它。每个用户每次都可以访问一个索引页面和“开始”按钮。当用户点击开始时，应用程序锁定，其他人需要等到用户完成。当用户关闭选项卡/浏
Android:如何改变输出声音的音调(实时)
我是 Android 开发新手。我正在寻找任何将音高变换应用到输出声音(实时)的方法。但我找不到任何起点。我找到了这个 topic但我仍然不知道如何应用它。有什么建议吗？最佳答案一般来说，该算
实时 PHP 套接字
背景用户计算机上的桌面应用程序从调制解调器获取电话号码，并在接到电话后将其发送到 PHP 脚本。目前，我可以通过 PHP 在指定端口上接收数据/数据包。然后我有一个连接到 411 数据库并返回指定电
c# - 实时、迭代应用架构
很抱歉提出抽象问题，但我正在寻找一些关于在循环中执行一些等效操作的应用程序类型的示例/建议/文章，并且循环的每次迭代都应该在特定时间部分公开其结果(例如， 10 秒)。我的应用程序在外部 WCF 服
c++ - 实时、用户时间和系统时间的区别
这个问题在这里已经有了答案: 关闭 10 年前。 Possible Duplicate: What specifically are wall-clock-time, user-cpu-time,
c# - 如何正确更新我的图表值？ (实时)
我最近遇到了一个叫做 LiveChart 的工具，决定试用一下。不幸的是，我在弄清楚如何实时更新图表值时遇到了一些问题。我很确定有一种干净正确的方法可以做到这一点，但我找不到它。我希望能够通过 p
dart - 实时 flutter
我正在实现实时 flutter 库 https://pub.dartlang.org/packages/true_time 遇到错误 W/DiskCacheClient(26153): Cannot
Instagram 实时 API 更新很少
我一直在使用 instagram 的实时推送 api ( http://instagram.com/developer/realtime/ ) 来获取特定位置的更新。我使用“半径”的最大可能值，即 5
stocks - 实时/高分辨率股票 API？
关闭。这个问题不满足Stack Overflow guidelines .它目前不接受答案。想改善这个问题吗？更新问题，使其成为 on-topic对于堆栈溢出。 7年前关闭。 Improve thi

行者123

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 实时网站不显示特定的 angularjs 指令(但显示其他指令)