我有一个AngularJS应用程序。
在index.html中,我有一个ng视图和两个ng iclude。
下面是我的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视图。
但问题是,当我运行应用程序时,第一个html会在ng视图之前关闭所有标记。当我在Chrome中“检查元素”时,我看到:
<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>

所有的沙发都关上了。所以它不会将样式应用于整个页面。为什么会这样?我怎么能挡道呢?
(基本上我想根据路径更改页眉和页脚的模板。现在它是硬编码的,只用于测试。)
编辑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'
    });
}]);

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

最佳答案

这很正常,因为这是异步调用。只需将粘贴代码从头和foter复制到索引并解决问题。
你将不能做你想做的事。

10-05 20:43
查看更多