Question

我是MEAN堆栈中项目的初学者。当我自己呈现HTML预览时以及从项目中运行它时，我得到了不一致的HTML预览。

它应该是什么样的（当我单独预览时）：

以及我在构建项目时的样子：

我希望局部视图位于标题下方并填充屏幕上的剩余空间。

这是我的index.html

<!doctype html>
<html ng-app="angulobby">
  <head>

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" type="css/text" href="./stylesheets/style.css">
    <script src="https://use.fontawesome.com/7222f42b52.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
    <script src="/socket.io/socket.io.js"></script>
    <script src="./main.js"></script>
    <script src="./services.js"></script>
    <script src="./controllers.js"></script>
    <base href="/">
  </head>
  <body data-ng-controller="IndexController">

     <!-- HEADER AND NAVBAR -->
<div class="box">
  <header>
      <nav class="navbar navbar-default">
        <div class="container">
          <div class="navbar-header">
            <a class="navbar-brand" href="/">AnguLobby Prototype</a>
          </div>

          <ul class="nav navbar-nav navbar-right">
            <li><a href="/"><i class="fa fa-home"></i> Home</a></li>
            <li><a href="/login"><i class="fa fa-shield"></i> Login</a></li>
            <li><a href="/register"><i class="fa fa-comment"></i> Register</a></li>
            <div ng-controller="logoutController">
              <a ng-click='logout()' class="btn btn-default">Logout</a>
            </div>
          </ul>

        </div>
      </nav>
  </header>

  <!-- MAIN CONTENT AND INJECTED VIEWS -->
  <div id="main">
    <!-- angular templating -->
    <!-- this is where the content will be injected -->
    <div data-ng-view></div>
  </div>
</div>
  </body>
</html>

这是局部视图home.html

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="../stylesheets/style.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    </head>
    <body>
        <div id="container" class="container-fluid" data-ng-controller="homeController">
            <div class="row">
                <div id="left" class="col-md-3">
                    1 of 3
                </div>
                <div id="middle" class="col-md-3">
                    2 of 3
                </div>
                <div id="right" class="col-md-3">
                    <div class="container-fluid" id="chat-container">
                        <div id="messages-box">
                            <h1 id="room-name"></h1>
                              <div data-ng-repeat="message in messages track by $index">
                                <span> {{message}} </span>
                              </div>
                        </div>
                      <div>
                        <form data-ng-submit="sendMessage()">
                            <input class="col-sm-11" id="m" data-ng-model="text" autocomplete="off"/>
                            <button class="btn btn-sm btn-info col-sm-1">SEND</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <script src="https://code.jquery.com/jquery-1.11.1.js"></script>
        <script src="/socket.io/socket.io.js"></script>
        <script></script>
    </body>
</html>

最后styles.css

html, body{
    width: 100%;
    height: 100%;
}

.box {
    display: flex;
    flex-flow: column;
    height: 100%;
}

#main {
    background-color: aliceblue;
    flex-grow: 1;
}

#ng-view {
    height: 100%;
}

#container {
  height: 100%;
  width: 100%;
}

#left, #middle, #right {
    height: 100%;
    width: 33%;
}

#chat-container {
    display: flex;
    flex-direction: column;
    background-color: lightblue;
    height: 100%;
    width: 100%;
}

#messages-box {

    flex-grow: 1;
}

Answer 1

您在另一个HTML网页的div中有一个HTML页面。内页是div的100％高度（仅与内容一样高）

只需从 home.html 部分中删除html和body标记即可。您可能想要检查如何包含js脚本......

<div id="container" class="container-fluid" data-ng-controller="homeController">
            <div class="row">
                <div id="left" class="col-md-3">
                    1 of 3
                </div>
                <div id="middle" class="col-md-3">
                    2 of 3
                </div>
                <div id="right" class="col-md-3">
                    <div class="container-fluid" id="chat-container">
                        <div id="messages-box">
                            <h1 id="room-name"></h1>
                              <div data-ng-repeat="message in messages track by $index">
                                <span> {{message}} </span>
                              </div>
                        </div>
                      <div>
                        <form data-ng-submit="sendMessage()">
                            <input class="col-sm-11" id="m" data-ng-model="text" autocomplete="off"/>
                            <button class="btn btn-sm btn-info col-sm-1">SEND</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <script src="https://code.jquery.com/jquery-1.11.1.js"></script>
        <script src="/socket.io/socket.io.js"></script>

angularjs注入视图不填充容器？

1 个答案: