angularjs - 基于路由隐藏ng-view DOM之外的元素

Question

问题:

如何向我的 Angular 应用程序添加“登录” View /路由以隐藏 ng-view 之外的元素DOM？

情况:

在我的 Angular 页面中，左侧有一个导航 TreeView ，中间有一个主 View :

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

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

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

问题:

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

是否有一种简单的替代方法可以让我检查 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