2015-11-08 48 views
0

我正在使用Angular開發一個Web應用程序。我創建了一個包含在index.html中的頭文件,因此它被固定到每個頁面,並且頁面內容通過UI視圖注入。我的問題是:如果我只想在之後顯示此標頭,那麼用戶已通過註冊和登錄頁面,我該怎麼辦?從Angular中的路由器訪問變量

我已經添加了一個變量到我的路由器,如下所示,但我不知道如何從index.html訪問路由器的變量,因爲它沒有連接到控制器(因爲它是跨所有頁面的固定內容)。我打算簡單地在index.html中拋出一個ng-hide =「hideHeader」。

app.config(function($stateProvider, $urlRouterProvider) { 

$urlRouterProvider.otherwise('/login'); 

$stateProvider 
    .state('login', { 
     url: '/login', 
     templateUrl: 'app/views/login/login.html', 
     controller: 'loginController', 
     controllerAs: 'vm', 
     hideHeader: true 
    }) 

    .state('signup', { 
     url: '/signup', 
     templateUrl: 'app/views/signup/signup.html', 
     controller: 'signupController', 
     controllerAs: 'vm', 
     hideHeader: true 
    }) 

    .state('landing', { 
     url: '/landing', 
     templateUrl: 'app/views/landing/landing.html', 
     controller: 'landingController', 
     controllerAs: 'vm', 
     hideHeader: false 
    }) 

    .state('account-management', { 
     url: '/account-management', 
     templateUrl: 'app/views/account-management/account-management.html', 
     controller: 'accountManagementController', 
     controllerAs: 'vm' 
     hideHeader: false 
    }); 
}); 

我怎樣才能在index.html訪問此hideHeader價值?有沒有辦法設置全局範圍變量並從那裏獲取值?

+0

請注意,ng-if的重量要比ng-hide/ng-show的重量輕,所以我會盡可能使用它。另外,當將數據添加到狀態時,應該使用數據參數,如文檔[此處](https://github.com/angular-ui/ui-router/wiki)中所示。 – nggonzalez

回答

3

這裏有一個不同的方法:專門爲認證(登錄/註銷)和認證狀態創建一個服務。然後在你的頭文件中調用該服務。鑑於標題取決於您的身份驗證,那麼將其抽象出來是有意義的。您的登錄/註冊控制器將與此服務進行交互。

您的路線現在也可以調用此服務,以查看他們是否應允許用戶根據登錄狀態查看它們。

+1

我同意這是最可重用的解決方案,如果有許多控制器將依賴於已發生的身份驗證。它也將允許集中訪問用戶權限,數據等。 – nggonzalez

+0

這太好了,謝謝@Akshay。 –