Question

在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>

所以我有一个带有导航侧边栏和内容div的盒装布局，我使用$ routeProvider显示内容页面。

enter image description here

现在我想显示一个填充整个窗口的登录页面，以便它不在页面内部div中。

我如何用棱角来实现它？因为ng-view位于页面内部div中，我想在身体层面注入我的html页面。

谢谢

Answer 1

您可以使用ng-hide隐藏导航栏/侧边栏，ng-class根据当前位置（登录或网站内容）将不同的css应用于您的内容）使用$location.url()。

类似：

<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"
}

css：

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

显示填充正文的登录页面

1 个答案: