Question

我有一个AngularJS应用程序。

在 index.html 中，我有一个ng-view和两个ng-icludes。

以下是我的 index.html

的方法

<html ng-app="myApp">
<head>
<!-- CSS imports -->
</head>
<body>
<div ng-include src="'header1.html'"></div>
 <div ng-view></div>
<div ng-include src="'footer1.html'"></div>
</body>
<!-- JS imports -->
</html>

我的 header1.html 就是这个

<div class="main-container">
        <div class="main-content">
            <div class="row">
                <div class="col-sm-10 col-sm-offset-1">

正如您所看到的，我在此处未关闭任何 div 标记。我的 footer1.html 是关闭代码的

            </div><!-- /.col -->
        </div><!-- /.row -->
    </div>
</div><!-- /.main-container -->

在我之间我有 ng-view ，这将改变基于路径。

但问题是当我运行应用程序时，第一个html关闭 ng-view 之前的所有标签。当我在Chrome中执行“Inspect element”时，我看到了：

<div ng-include="" src="'header1.html'">
    <div class="main-container ng-scope">
        <div class="main-content">
            <div class="row">
                <div class="col-sm-10 col-sm-offset-1">
                </div>
            </div>
        </div>
    </div>
</div>

<div ng-view> ... </div>
<div ng-include="" src="'footer1.html'">                        

                <!-- /.col -->
            <!-- /.row -->

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

所有 divs 都已关闭。因此它不会将样式应用于整个页面。为什么会这样？我怎么能以另一种方式进入呢？

（基本上我想根据路径更改页眉和页脚的模板。现在它只是用于测试的硬编码。）

编辑1

app.js

的一部分

myApp.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider
    .when('/login', {
        templateUrl: 'login.html',
        controller: 'LoginController'
    })
    .when('/register', {
        templateUrl: 'register.html',
        controller: 'RegisterController'
      })
     .when('/home', {
       templateUrl: 'views/home.html',
       controller: 'homeController'
    })
   .when('/profile', {
       templateUrl: 'views/profile.html',
       controller: 'profileController'
    })
    .otherwise({
       redirectTo: '/login'
    });
}]);

对于登录和注册我的页眉和页脚样式应该是不同的，对于其他页面，我应该有其他样式。

Answer 1

这是正常的，因为它是异步调用。只需将页眉和页脚的粘贴代码复制到索引并解决问题。你将无法做你想做的事。

Answer 2

您仍然可以通过更改页面来执行您要执行的操作，例如

<html ng-app="myApp">
<head>
<!-- CSS imports -->
</head>
<body>
    <div ng-include src="'body1.html'"></div>
</body>
<!-- JS imports -->
</html>

body1

<div class="main-container">
    <div class="main-content">
        <div class="row">
            <div class="col-sm-10 col-sm-offset-1">
    <div ng-view></div>     
       </div><!-- /.col -->
        </div><!-- /.row -->
    </div>
</div><!-- /.main-container -->

如果你想要将你的页脚分解出来，例如在那里添加另外的ng-include或指令（如果适用）。似乎有意义的是，您的指令或模板应始终在与打开的文件相同的文件中关闭标记。

EDIT1

body2

<div class="main-container-alternative">
    <div class="main-content-alternative">
        <div class="row">
            <div class="col-sm-10 col-sm-offset-1">
    <div ng-view></div>     
       </div><!-- /.col -->
        </div><!-- /.row -->
    </div>
</div><!-- /.main-container -->

Answer 3

所以你必须在tempalte的每个模板上做的只是添加页眉和页脚，例如：的login.html

<div class="main-container">
        <div class="main-content">
            <div class="row">
                <div class="col-sm-10 col-sm-offset-1">
                    <div >
                         This is my login stuff
                     </div>
                </div><!-- /.col -->
        </div><!-- /.row -->
    </div>
</div><!-- /.main-container -->

register.html

 <div class="main-container">
            <div class="main-content">
                <div class="row">
                    <div class="col-sm-10 col-sm-offset-1">
                        <div >
                             This is my register stuff
                         </div>
                    </div><!-- /.col -->
            </div><!-- /.row -->
        </div>
    </div><!-- /.main-container -->

因此，在每个模板上，您必须提供自己的页眉和页脚。而索引html看起来像：

<html ng-app="myApp">
<head>
<!-- CSS imports -->
</head>
<body>
<div ng-view></div>
</body>
<!-- JS imports -->
</html>

AngularJS - ng-include关闭HTML文件中的未关闭标记

3 个答案: