Question

我一直在开发一个有趣的网站，目的是学习Angular。在本地运行时没有问题;一切都按计划显示。但是现在我把它放在网上，其中一条指令没有显示（登录框）。

应的网站： http://s23.postimg.org/7gzolivgr/Screenshot_9.png 在线时的外观如何： http://s29.postimg.org/bnqtle713/Screenshot_8.png CODE BELOW（指令是身体标签下面的两行）

的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;
}

Answer 1

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

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

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

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

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

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

此外，Chrome开发工具是您的朋友：

这会告诉你它无法找到模板。

实时网站没有显示特定的angularjs指令（但显示其他指令）

1 个答案: