Question

我正在制作一个简单的angularJS应用程序并且很新。我有这样的菜单

主页登录

如果用户已成功登录，我希望登录更改为注销。我已实现登录（psuedo实现），我面临的探测是，我的菜单位于顶部“

我看了这个问题AngularJs, change menu item whether user is connected or not，但我无法解决问题。

我该如何解决这个问题？我家的控制器看起来像这样

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州的模板提交。模板中的ui-view将由feature1州的模板提交。

我知道这有点不清楚，但尝试按照“开始使用”指南，这个例子可以帮到你很多。

希望有所帮助

AngularJS根据用户状态

1 个答案: