基于路由NG-DOM查看外隐藏元素 [英] Hide element outside the ng-view DOM based on route

问题描述

问：

我如何能登录视图/路由添加到我的角度应用程序，隐藏了超出一个元素 NG-视图 DOM？

情况：

在我的角度上，我在左边和中央的主视图导航树视图：

 ＆LT; D​​IV NG-应用=对myApp＆GT;
    ＆LT; D​​IV CLASS =COL-SM-3NG控制器=TreeController＆GT;
        ＆LT; D​​IV treeviewdirective-这里＆GT;
        ＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;
    ＆LT; D​​IV CLASS =COL-SM-9的内容NG视图=＆GT;
    ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

在树视图中的每个节点改变使用类似 ='＃/'位置window.location.hash + routeForTheClickedItem;

使用标准的路由，这个伟大的工程，即树是不是每次都重新加载，但只有主的窗口。

问题：

我想一个登录视图中添加登录功能。对于这种观点，应该树视图不可见 - 只有登录后。与正常的路由实现这一目标，我知道我可以移动 NG-视图一个级别，即嵌入树形视图到每个观点 - 但是这将导致在TreeView是重新装入每个路由改变。

是否有一个简单的办法，让我检查什么页面显示在NG-看法？或检查其他一些变量在路由过程中设置的？然后，我可以使用类似：

 ＆LT; D​​IV CLASS =COL-SM-3NG控制器=TreeControllerNG-秀=IsUserLoggedIn＆GT;
 

解决方案

您可以在顶部的div级别定义的控制器。

是这样的：

 ＆LT; D​​IV NG-应用=对myAppNG控制器=MainController＆GT;
 

和 MainController 注入会话。像会话的东西就足以决定是否显示该树。

下面是一个例子 MainController ：

  _app.controller（'MainController'，函数（$范围，SessionService）{
    $ scope.user = SessionService.getUser（）;
}）;
 

下面是一个例子 SessionService ：

  _app.factory（'SessionService'，函数（）{
    变种用户=无效;
    返回{
        的getUser：功能（）{
            返回用户;
        }，
        SETUSER：功能（NEWUSER）{
            用户= NEWUSER;
        }
    };
}）;
 

当然，当您登录您必须将用户设置为 SessionService 。因此， SessionService 已被注入到你的的LoginController 了。

最后，你的HTML：

 ＆LT; D​​IV NG-应用=对myAppNG控制器=MainController＆GT;
    ＆LT; D​​IV CLASS =COL-SM-3NG控制器=TreeController＆GT;
        ＆LT; D​​IV NG隐藏=用户== NULLtreeviewdirective-这里＆GT;
        ＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;
    ＆LT; D​​IV CLASS =COL-SM-9的内容NG视图=＆GT;
    ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

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屋！