问:
我如何能登录视图/路由添加到我的角度应用程序,隐藏了超出一个元素 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>
![求思科路由下图案例的配置文档 binglengchuanshuo qq.com](/d/file/2023/09-17/570fcaeecad2113b8f907594ffd99ba8.png)
解决方案
您可以在顶部的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>
相关推荐
最新文章