Question

我正在学习angularjs并开始我的第一个“真实”项目。我花了几个小时在网上搜索答案，但似乎找不到任何相关的简单术语让我理解。

我有一个只加载导航标题的指令：

app.directive('navDirective', function() {
    return {
              templateUrl: '../../views/nav.html'
           };
});

在我的index.html文件中，我只是

<nav-directive> </nav-directive>

最初我正在使用Auth0并使其正常工作，然后在导航项目中添加了一个ng-show，以便只有在没有用户的情况下才会显示登录，并且在有用户时显示所有其他内容。

现在，我正在尝试使用本地身份验证，而不是使用Auth0。它有效，但在我看到导航模板更新之前，我必须在登录后点击浏览器的重新加载按钮。

我想我已经发现当使用Auth0时，我实际上离开我的网站去Auth0，然后回调导致我的页面重新加载 - 所以我看到我的导航项目。

当我使用护照的本地策略在本地登录时，如何强制导航模板重新加载？或者意识到现在有用户，所以更改模板中列表项的ng-show？

今晚阅读，似乎我可以使用$ watch来做到这一点，但我找不到“$ watch-for-dummies”页面并且对于它是如何正常工作感到困惑，我会把它放在链接功能以及如何触发它。

我的nav.html模板是

<nav class="navbar navbar-expand-lg navbar-dark bg-dark" ng-controller="NavCtrl">
        <a class="navbar-brand" href="#" ng-show="currentUser">User: {{ currentUser.username }}</a>

        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse navbarCollapse justify-content-end" id="navbarNavDropdown">
          <ul class="nav navbar-nav ">  

            <li class="nav-item" ng-show="currentUser">
              <a class="nav-link nav-item-colapse" ui-sref="home">Home </a>
            </li>

            <li class="nav-item" ng-show="currentUser">
              <a class="nav-link nav-item-colapse" ui-sref="view2">View 2</a>
            </li>

            <li class="nav-item" ng-show="currentUser">
              <a class="nav-link nav-item-colapse" ui-sref="view3">View 3</a>
            </li> 

            <li class="nav-item" ng-show="currentUser">
                <a class="nav-link nav-item-colapse" ui-sref="reports">Reports</a>
            </li>


            <li class="nav-item dropdown" ng-show="currentUser">
              <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Admin
              </a>
              <div class="dropdown-menu" style="right: 0; left: auto;" aria-labelledby="navbarDropdownMenuLink">
                <a class="dropdown-item nav-item-colapse" ui-sref="sub1">Sub Task1</a>
                <a class="dropdown-item nav-item-colapse" ui-sref="sub2">Sub Task2</a>
                <a class="dropdown-item nav-item-colapse" href="http://www.google.com">Do Something Else</a>
              </div>
            </li>

            <li class="nav-item">
              <a class="nav-link active" ui-sref="login" ng-show="!currentUser">Login</a>
          </li>


            <li class="nav-item">
                <a class="nav-link" ng-click="logout()" ng-show="currentUser">Logout</a>
            </li>

          </ul>
        </div>
      </nav>

和navCtrl是：

app.controller("navCtrl", function($scope, mainSrvc) {

    mainSrvc.getUser().then(function(user){
      $scope.user = (user.data);
      console.log('nav ctrl ran')  //except it doesn't when logging in locally
      console.log(($scope.user));
    });
  });

而这一点我不确定我是否会完全错误或者是什么。

有任何建议或指示吗？

Answer 1

您可以使用ng-if =“vm.isLoggedIn（）”来了解用户是否在场。

<nav ng-controller="LoginController as vm" ng-if="vm.isLoggedIn()" 
class="navbar navbar-inverse navbar-static-top" ng-init="vm.init()">

在您的登录控制器中，返回用户登录后是否已登录

function LoginController($http, $location, $window, AuthFactory, jwtHelper) {
    var vm = this;

    vm.isLoggedIn = function () {
        if (AuthFactory.isLoggedIn) {
            return true;
        }
        else {
            return false;
        }
    };
vm.login = function () {
        if (vm.username && vm.password) {
            var user = {
                username: vm.username,
                password: vm.password
            };

            $http.post('/api/users/login', user).then(function (response) {

                if (response.data.success) {
                    $window.sessionStorage.token = response.data.token;
                    AuthFactory.isLoggedIn = true;
                    var token =$window.sessionStorage.token;
                    var decodedToken = jwtHelper.decodeToken(token);
                    vm.loggedInUser = decodedToken.username;
                }
            }).catch(function (error) {
                console.log(error);   
            })
        }

    }

登录后重新加载Angular导航指令

1 个答案: