基于路由NG-DOM查看外隐藏元素 [英] Hide element outside the ng-view DOM based on route
问题描述
问:
我如何能登录视图/路由添加到我的角度应用程序,隐藏了超出一个元素 NG-视图
DOM?
情况:
在我的角度上,我在左边和中央的主视图导航树视图:
< DIV NG-应用=对myApp>
< DIV CLASS =COL-SM-3NG控制器=TreeController>
< DIV treeviewdirective-这里>
< / DIV>
< / DIV>
< DIV CLASS =COL-SM-9的内容NG视图=>
< / DIV>
< / DIV>
在树视图中的每个节点改变使用类似 ='#/'位置window.location.hash + routeForTheClickedItem;
使用标准的路由,这个伟大的工程,即树是不是每次都重新加载,但只有主的窗口。
问题:
我想一个登录视图中添加登录功能。对于这种观点,应该树视图不可见 - 只有登录后。与正常的路由实现这一目标,我知道我可以移动 NG-视图
一个级别,即嵌入树形视图到每个观点 - 但是这将导致在TreeView是重新装入每个路由改变。
是否有一个简单的办法,让我检查什么页面显示在NG-看法?或检查其他一些变量在路由过程中设置的?然后,我可以使用类似:
< DIV CLASS =COL-SM-3NG控制器=TreeControllerNG-秀=IsUserLoggedIn>
您可以在顶部的div级别定义的控制器。
是这样的:
< DIV NG-应用=对myAppNG控制器=MainController>
和 MainController
注入会话
。像会话
的东西就足以决定是否显示该树。
下面是一个例子 MainController
:
_app.controller('MainController',函数($范围,SessionService){
$ scope.user = SessionService.getUser();
});
下面是一个例子 SessionService
:
_app.factory('SessionService',函数(){
变种用户=无效;
返回{
的getUser:功能(){
返回用户;
},
SETUSER:功能(NEWUSER){
用户= NEWUSER;
}
};
});
当然,当您登录您必须将用户设置为 SessionService
。因此, SessionService
已被注入到你的的LoginController
了。
最后,你的HTML:
< DIV NG-应用=对myAppNG控制器=MainController>
< DIV CLASS =COL-SM-3NG控制器=TreeController>
< DIV NG隐藏=用户== NULLtreeviewdirective-这里>
< / DIV>
< / DIV>
< DIV CLASS =COL-SM-9的内容NG视图=>
< / DIV>
< / DIV>
Question:
How can I add a "Login" view/route to my angular app that hides an element that is outside the ng-view
DOM?
Situation:
In my Angular page, I have a navigation tree view on the left and the main view in the center:
<div ng-app="myApp">
<div class="col-sm-3" ng-controller="TreeController">
<div treeviewdirective-here>
</div>
</div>
<div class="col-sm-9 content" ng-view="">
</div>
</div>
Each node in the treeview changes the location using something like window.location.hash = '#/' + routeForTheClickedItem;
.
Using the standard routing, this works great, i.e. the tree is not reloaded each time, but only the main "window".
Problem:
I want to add a login functionality with a login view. For this view, the treeview should not be visible - only after the login. To achieve this with the normal routing, I know I could move the ng-view
one level up, i.e. embed the treeview into each view - but this would result in the treeview being reloaded with every route change.
Is there an easy alternative that allows me to check what page is displayed in the ng-view? Or check some other variable set during the routing? Then I could use something like:
<div class="col-sm-3" ng-controller="TreeController" ng-show="IsUserLoggedIn">
You could define a controller at the top div level.
Something like:
<div ng-app="myApp" ng-controller="MainController">
and in MainController
inject a Session
. Something like Session
is enough to decide whether to show the tree.
Here's an example of MainController
:
_app.controller('MainController', function ($scope, SessionService) {
$scope.user = SessionService.getUser();
});
Here's an example of SessionService
:
_app.factory('SessionService', function() {
var user = null;
return {
getUser : function() {
return user;
},
setUser : function(newUser) {
user= newUser;
}
};
});
Of course, when you login you must set the user to the SessionService
. Therefore, a SessionService
has to be injected into your LoginController
, too.
And finally, your html:
<div ng-app="myApp" ng-controller="MainController">
<div class="col-sm-3" ng-controller="TreeController">
<div ng-hide="user == null" treeviewdirective-here>
</div>
</div>
<div class="col-sm-9 content" ng-view="">
</div>
</div>
这篇关于基于路由NG-DOM查看外隐藏元素的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!