我有一个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复制到索引并解决问题。
你将不能做你想做的事。