隱藏元素

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