Question

我很难在AngularJS中制作动态导航栏。我用来检查用户是否登录的范围变量在导航栏中没有变化，但是它的值在控制台或内部更改NG-视图。这是我的index.html导航栏

<nav class="navbar navbar-expand-md navbar-dark bg-dark mb-4" role="navigation" ng-controller="controllerlogin">

    <a class="navbar-brand" href="#">Gab's Store</a>
    <div class="collapse navbar-collapse" id="navbarCollapse">
      <ul class="navbar-nav mr-auto">
        <li class="nav item">
          <a class="nav-link" href="#/">Acasa</a>
        </li>
        <li class="nav item">
          <a class="nav-link" href="#!/produse">Produse</a>
        </li>
        <li class="nav item">
          <a class="nav-link" href="#!/despre">Despre</a>
        </li>
        <li class="nav item">
          <a class="nav-link" href="#!/produsee/adaugareprodus">Adaugare produs</a>
        </li>
      </ul>
      <form class="form-inline mt-2 mt-md-0" ng-hide="logat">
        <a class="btn btn-outline-success" href="#!/login">{{logat}}</a>
      </form>
       <form class="form-inline mt-2 mt-md-0" ng-show="logat">
        <label>Welcome,{{loggedin.username}}!</label>
        <a class="btn btn-outline-success"  ng-init="Logout()">Log out</a>
      </form>
    </div>

  </nav>

变量 logat 用于存储用户是否登录的值。这是我的controllerlogin文件

var myApp = angular.module('myApp');

 myApp.controller('controllerlogin', 
 ['$scope','$http','$location','$routeParams','$rootScope',
function($scope,$http ,$location,$routeParams,$rootScope){
$scope.Login = function(){
$http.post('/api/login',$scope.userr).then(succesCallback,errorCallback);
function succesCallback(response){  
        console.log(response.data);
    $rootScope.loggedin = response.data;
    if($rootScope.loggedin.validity == "0")
    {
        $rootScope.logat = true;
        window.location.href = '#!/'

    }if($rootScope.loggedin.validity == "1"){
        $rootScope.logat = false;
        window.location.href = '#!/login'
    }
    if($rootScope.loggedin.validity == "2"){
        $rootScope.logat = false;
        window.location.href = '#!/login'
    }
}
function errorCallback(error){
    throw error;
}
}

}]）;

变量有效性用于检查登录是否成功（基于服务器的响应）。
以及我的app.js文件中的一部分代码。

var myApp = angular.module('myApp',['ngRoute']);
myApp.config(function($routeProvider){
$routeProvider.when('/',{
    controller:'controllertipproduse',
    templateUrl: 'views/Default.html'
})
.when('/produse',{
    controller:'controllerproduse',
    templateUrl: 'views/Produse.html'
})
.when('/login',{
    controller:'controllerlogin',
    templateUrl: 'views/Login.html'
})

Answer 1

尝试使用$ scope而不是$ rootScope。

通常不建议使用$ rootScope附加角度变量。

Answer 2

这应该有效

   <a class="btn btn-outline-success" href="#!/login">{{$root.logat}}</a>

范围变量未在AngularJS中的ng-view之外的导航栏中更新

2 个答案: