Question

我有一个服务被调用以获取授权用户的位置列表。此信息用于填充选择列表，他们可以切换位置以查看不同的信息。

选择列表的代码位于index.html的导航栏中，但我不希望该服务在页面上触发，直到用户成功通过身份验证并且应用切换到主视图

我使用ng-show隐藏导航栏，其中包含用于AuthCtrl的isAuthorized（）函数。但是，来自LocationCtrl的服务调用填充ng-repeat始终会触发用户是否登录。我可以将导航组件移动到主视图中，但是我需要在所有受保护的视图中使用它。在单页面应用程序中处理基于服务的菜单项的最佳处理方法是什么？

的index.html

<!doctype html>
<html lang="en" ng-app="betterbooks">
<head>
  scripts...
</head>

<body>
  <nav class="navbar-fixed-top" ng-controller="AuthCtrl as auth">
    <div class="container" ng-show="auth.isAuthorized()">
      <ul class="navbar-right">
        <li><a href="#/home/">Home</a></li>
        <li class="dropdown">
          <a href="#" onclick="return false;" class="dropdown-toggle" data-toggle="dropdown">Accounts <span class="caret"></span></a>

          <ul class="dropdown-menu" ng-controller="LocationCtrl">
            <li ng-repeat="location in locations">
              <a href="#/location/{{ location.id }}/">
                 {{ location.name }} 
              </a>
            </li>
          </ul>

        </li>
        <li><button ng-click="auth.logout()">Logout</button></li>
      </ul>
    </div>
  </nav>
  <div class="view-container" style="height:100%">
    <div ui-view class="view-frame"></div>
  </div>
</body>
</html>

Answer 1

请改用ng-if。在auth.isAuthorized()为真之前，导航栏无法加载到dom中，因此LocationCtrl不会渲染或运行直到该点。

如何防止在AngularJS应用程序中授权用户之前触发服务

1 个答案: