Javascript 显示填充正文的登录页_Javascript_Jquery_Angularjs_Angularjs Routing

Javascript 显示填充正文的登录页

javascript jquery angularjs

Javascript 显示填充正文的登录页,javascript,jquery,angularjs,angularjs-routing,Javascript,Jquery,Angularjs,Angularjs Routing,在angularjs（1.3）和bootstrap 3（带有自定义类）中，我有以下索引结构： <html ng-app="myApp"> ... <body> <main class="page-content container"> <div ng-include src="'Views/Partials/Navbar.html'"></div> <div ng-include src="'Vi

在angularjs（1.3）和bootstrap 3（带有自定义类）中，我有以下索引结构：

<html ng-app="myApp">
...
<body>
   <main class="page-content container">
       <div ng-include src="'Views/Partials/Navbar.html'"></div>
       <div ng-include src="'Views/Partials/Sidebar.html'"></div>

       <div class="page-inner">
           <div ng-view>
           </div>
       </div>
   </main>
</body>
...
</html>


...
...

因此，我有一个带导航侧栏的盒式布局和一个content div，其中我使用$routeProvider显示内容页面

现在我想显示一个填充整个窗口的登录页面，这样它就不在页面内部div中了

我怎样才能用角度来实现它？因为ng视图位于页面内部div中，我希望在主体级别注入html页面

谢谢

您可以使用

ng hide

隐藏导航栏/侧栏和

ng类

根据当前位置（登录或站点内容）使用

$location.url（）

对您的内容应用不同的

css

类似于：

<html ng-app="myApp">
...
<body>
   <main class="page-content container">
       <div ng-show="show.navbar" ng-include src="'Views/Partials/Navbar.html'"></div>
       <div ng-show="show.sidebar" ng-include src="'Views/Partials/Sidebar.html'"></div>

       <div ng-class="{{css.innerContent}}">
           <div ng-view>
           </div>
       </div>
   </main>
</body>
...
</html>

//show navbar/sidebar by default
$scope.show = {
   navbar : true,
   sidebar : true 
}
//default values for css class
$scope.css = {
    innerContent : "page-inner" 
}
//check current location and assign new values
if( $location.url() == "/login"){
    $scope.show.navbar = false;
    $scope.show.sidebar = false;
    $scope.css.innerContent = "login-inner"
}

 //example of css
.page-inner{
    width:50%;
}
.login-inner{
    width:100%;
}

css:

<html ng-app="myApp">
...
<body>
   <main class="page-content container">
       <div ng-show="show.navbar" ng-include src="'Views/Partials/Navbar.html'"></div>
       <div ng-show="show.sidebar" ng-include src="'Views/Partials/Sidebar.html'"></div>

       <div ng-class="{{css.innerContent}}">
           <div ng-view>
           </div>
       </div>
   </main>
</body>
...
</html>

//show navbar/sidebar by default
$scope.show = {
   navbar : true,
   sidebar : true 
}
//default values for css class
$scope.css = {
    innerContent : "page-inner" 
}
//check current location and assign new values
if( $location.url() == "/login"){
    $scope.show.navbar = false;
    $scope.show.sidebar = false;
    $scope.css.innerContent = "login-inner"
}

 //example of css
.page-inner{
    width:50%;
}
.login-inner{
    width:100%;
}