Zal*_*oza 4 javascript angularjs
我正在尝试使用ng-if在我的单页应用页面中包含侧栏并将其隐藏在其他页面中.HTML是:
<body ng-app="simpleapp">
<div id="wrapper">
<!-- Navigation -->
<div ng-include="'./include/sidebar.html'"></div>
<!-- Page Content -->
<div id="page-wrapper">
<div class="container-fluid">
<div ng-view class="slide-animation"></div>
</div>
</div>
</div>
在上面的示例中,ng-include加载侧边栏,id page-wrapper用于在侧边栏的容器上添加额外边距,ng-view是我的视图加载的位置.
我需要做的是在一些页面中我不希望侧边栏存在,就像(例如在登录页面中)
angular.module('exampleApp', ['ngRoute', 'ngResource', 'ngCookies'])
//Routes
.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/login', {
templateUrl: 'partials/login.html',
controller: 'loginCtrl'
}).
when('/home', {
templateUrl: 'partials/home.html',
controller: 'homeCtrl'
}).
otherwise({
redirectTo: '/login'
});
} ])
.controller('mainCtrl',function($rootScope,$window){
$rootScope.show = true;
if($window.location.hash == '#/login'){
$rootScope.show = false;
} });
我编写的最佳解决方案是向页面主体添加另一个ctrl并使用ng-if和condition将id添加到div.
<div ng-if="$root.show" ng-include="'./include/sidebar.html'"></div>
</sidebar>
<!-- Page Content -->
<div id="{{$root.show ? 'page-wrapper':''}}">
这工作正常..但是当页面发生变化时......这个条件没有重新应用:(所以如果我打开#/ login我可以看到没有侧边栏,但是一旦我移动到/home侧边栏也没有显示.
你能帮忙吗？我试着搜索几个小时没有成功.
谢谢
我没有看到任何使用你的东西mainCtrl所以我不确定它将如何被使用.我想你可能想要考虑的是一种更像这样的方法:
angular.module('myApp')
.run(function($rootScope, $location, $routeParams) {
$rootScope.$on('$routeChangeSuccess', function(event, current) {
// Look at $location.path()
// If it isn't what you want, toggle showSideBar...
$rootScope.showSideBar = true|false;
}
}]);
然后您的HTML可以像这样引用它:
<div ng-if="showSideBar" ng-include="'./include/sidebar.html'"></div>
| 归档时间： |
|
| 查看次数： |
4727 次 |
| 最近记录： |