根据路由隐藏ng-view DOM之外的元素

Question

问题：

如何将“登录”视图/路由添加到隐藏 ng-view DOM 之外的元素的 Angular 应用程序？

情况：

在我的 Angular 页面中，左侧有一个导航树视图，中间有一个主视图：

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

树视图中的每个节点都使用window.location.hash = '#/' + routeForTheClickedItem; 之类的内容更改位置。

使用标准路由，效果很好，即每次都不会重新加载树，而只会重新加载主“窗口”。

问题：

我想通过登录视图添加登录功能。对于这个视图，树视图不应该是可见的——只有在登录之后。为了通过普通路由实现这一点，我知道我可以将ng-view 上移一级，即将树视图嵌入到每个视图中——但这会导致树视图在每次路由更改时重新加载。

是否有一个简单的替代方法可以让我检查 ng-view 中显示的页面？或者在路由期间检查其他一些变量集？然后我可以使用类似的东西：

<div class="col-sm-3" ng-controller="TreeController" ng-show="IsUserLoggedIn">

Answer 1

你可以在 ng-view 之外监听 routeChangeSuccess

$scope.$on('$routeChangeSuccess', function (event, currentRoute, previousRoute) {
//do something here
});

希望对您有所帮助，您可以在 angularjs IRC - maurycyg 上找到我

Answer 2

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

类似：

<div ng-app="myApp" ng-controller="MainController">

并在MainController 中注入Session。 Session 之类的内容足以决定是否显示树。

这是MainController 的示例：

_app.controller('MainController', function ($scope, SessionService) {
    $scope.user = SessionService.getUser();
});

这是SessionService 的示例：

_app.factory('SessionService', function() {
    var user = null;
    return {
        getUser : function() {
            return user;
        },
        setUser : function(newUser) {
            user= newUser;
        }
    };
});

当然，当您登录时，您必须将用户设置为SessionService。因此，SessionService 也必须注入到您的 LoginController 中。

最后，你的 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>