隐藏元素

Question

问：

我如何能“登录”视图/路由添加到我的角度应用程序，隐藏了是ng-view DOM之外的元素？

现状：

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

<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

你可以在顶级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> 

Answer 2

你可以侦听routeChangeSuccess外NG-视图

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

希望帮助，你可以追我上angularjs IRC - maurycyg