AngularJS根據用戶狀態顯示菜單中的登錄/注銷

Question

我正在制作一個簡單的angularJS應用程序並且很新。 我有這樣的菜單

主頁登錄

如果用戶已成功登錄，我希望登錄更改為注銷。我已經實現了登錄（psuedo實現），我面臨的探測是，我的菜單位於頂部“

我查看了AngularJs這個問題，更改了菜單項，無論用戶是否已連接，但我無法解決問題。

我該如何解決？ 我家的控制器看起來像這樣

scotchApp.controller('mainController', function($scope, user) {

// create a message to display in our view
$scope.isUserLoggedIn = user.getSession();
$scope.message = 'Everyone come and see how good I look!' + user.getSession();
$scope.submit = function(){ 
     alert('Thank you. Request is sent successfully');
     $('#SupportModal').modal('hide');
};
});

其中user是FactoryService。 那部分工作正常。 任何幫助表示贊賞。

如果我在菜單旁邊顯示{{isUserLoggedIn}}值，它總是顯示false，這就是問題所在。 但是，如果我把它放在home.html中，它會顯示正確的價值。 問題是我無法在菜單中使用{{isUserLoggedIn}}構建邏輯。

Answer 1

我建議你使用ui-router 。 它提供嵌套視圖，並將幫助您解決此問題。

這是一個快速示例（在plunker中）如何在您的情況下使用它（真正簡化）：

以下是您的州應該如何看待：

$stateProvider
  .state('app', {
    templateUrl: 'head.html',
    controller: 'HeadCtrl',
  })
  .state('app.feature1', {
    url:'/feature1',
    templateUrl: 'feature1.html',
    controller:'FeatureCtrl'
  })

和你的不同的HTML文件：

Index.html（只顯示正文部分）：

<body ng-app="testApp">
    <ui-view></ui-view>
</body>

Head.html：

<div>
  <div class="header">
    You are currently <span ng-show="user.connected">connected</span><span ng-show="!user.connected">disconnected</span>
  </div>
  <ui-view></ui-view>
</div>

feature1.html

<div class="page">
  <div>
    I am Bill <button ng-click="connect()">Connect as Bill</button>
  </div>
  <div>
    I am Steve <button ng-click="connect(1)">Connect as Steve</button>
  </div>
  <div>
    <button ng-click="disconnect()">Disconnect</button>
  </div>
</div>

您需要了解的是，如果您到達“/ feature1”網址，您將進入狀態app及其子狀態feature1 （狀態app.feature1 ）

第一個ui-view將由app state的模板提交。 模板中的ui-view將由feature1狀態的模板提交。

我知道這有點不清楚，但試着遵循“開始”指南，這個例子可以幫助你很多。

希望它有所幫助

AngularJS根據用戶狀態顯示菜單中的登錄/注銷

問題描述

1 個解決方案

解決方案1
3 2015-12-11 16:18:38

AngularJS根據用戶狀態顯示菜單中的登錄/注銷

問題描述

1 個解決方案

解決方案1 3 2015-12-11 16:18:38

解決方案1
3 2015-12-11 16:18:38