如何更改用戶登錄後的div

我正在建立一個網站，我想製作一個單頁面應用程序。 Iam使用nodejs作爲後端，角色作爲前端。 iam卡住的東西是我想顯示一個特殊的div當用戶沒有登錄，在登錄其他div的事件應該顯示。什麼是最好的方式來實現它。如何更改用戶登錄後的div

據我所知，我用ng-if作爲兩個div的屬性，我想要互相替換。我有一個角度函數來驗證已登錄的sesssion，其名稱爲isloggedin()。

所以我用<div ng-if="!checkLoggedin()">在一個div和<div ng-if="checkLoggedin()">在其他股利。

因此，在第一次請求頁面沒有登錄，並且條件按原樣工作。但是，我登錄後，從第二個不顯示。

這是我錯誤地期望發生的事情，還是有其他任何事情來做到這一點。我檢查了函數的值，它在一個條件下有數據，在其他條件下有0。我在哪裏錯了。

添加了條件代碼。

var checkLoggedin = function ($q, $timeout, $http, $location, $rootScope) { 
    var deferred = $q.defer(); 

    $http({ 
     method: 'GET', 
     url: "http://localhost:3000/loggedin" 
    }).success(function (user) { 
     if (user !== '0') { 
      $rootScope.message = 'You are log in.'; 
      $timeout(deferred.resolve, 0); 
      deferred.resolve(); 
      $location.url('/home'); 

     } else { 
      $rootScope.message = 'You need to log in.'; 
      $timeout(function() { 
       deferred.reject(); 
      }, 0); 
      deferred.reject(); 
      $location.url('/login'); 
     }; 
    });

這裏是表格代碼。

<form action="/#/home" ng-submit="login(user)"> 
              <div class="form-group"> 
               <div class="input-group input-group-in ui-no-corner no-border bordered-bottom bg-none"> 
                <div class="input-group-addon"><i class="fa fa-envelope text-muted"></i></div> 
                <input class="form-control" placeholder="email" ng-model="user.email"> 
               </div> 
              </div><!-- /.form-group --> 
              <div class="form-group"> 
               <div class="input-group input-group-in ui-no-corner no-border bordered-bottom bg-none"> 
                <div class="input-group-addon"><i class="fa fa-lock text-muted"></i></div> 
                <input type="password" class="form-control" placeholder="Password" ng-model="user.password"> 
                <div class="input-group-addon"><small><a href="/#/forgotpass">Forgot?</a></small></div> 
               </div> 
              </div><!-- /.form-group --> 
              <div class="form-group"> 
               <div class="row"> 
                <div class="col-md-6"> 
                 <div class="nice-checkbox nice-checkbox-inline"> 
                  <input type="checkbox" name="rememberSignIn1" id="rememberSignIn"> 
                  <label for="rememberSignIn1">Remember</label> 
                 </div> 
                </div><!-- /.cols --> 
                <div class="col-md-6"> 
                 <button type="submit" class="btn btn-sm btn-block btn-info" style="margin-top:5px" >SUBMIT</button> 
                </div><!-- /.cols --> 
               </div><!-- /.row --> 
              </div><!-- /.form-group --> 
             </form><!-- /form --> 
            </div><!-- /.panel-body -->

來源

2016-08-30 Nivas Dhina

我認爲這個問題在模型中沒有任何改變，所以角度不會再次激發摘要循環，這就是爲什麼登錄後'checkLoggedin'沒有再次被觸發。 –

你的意思是改變div的順序我是否讓你正確...？ –

當值改變時它不會自動觸發。 –

依我之見，塊

<div ng-if="!checkLoggedin()">

和

<div ng-if="checkLoggedin()">

將在DOM負載（頁面加載）上執行。所以模型沒有機會更新。這裏的正確的方法將是使用範圍變量中，如果塊作爲

<div ng-if="isLoggedIn"> ... <div ng-if="!isLoggedIn">

，並在服務呼叫，說的成功處理程序來更新變量的值，

var checkLoggedin = function ($q, $timeout, $http, $location, $rootScope) { 
var deferred = $q.defer(); 

$http({ 
    method: 'GET', 
    url: "http://localhost:3000/loggedin" 
}).success(function (user) { 
    if (user !== '0') { 
     // set value here 
     $rootScope.isLoggedIn = true; 

     $rootScope.message = 'You are log in.'; 
     $timeout(deferred.resolve, 0); 
     deferred.resolve(); 
     $location.url('/home'); 

    } else { 
     $rootScope.message = 'You need to log in.'; 
     $timeout(function() { 
      deferred.reject(); 
     }, 0); 
     deferred.reject(); 
     $location.url('/login'); 
    }; 
});

這樣，我們可以確定模型已經更新了值，如果塊將被添加到DOM，則可以確定模型已經更新。

來源

2016-08-30 11:42:23

你的做法是正確的，但可能是你還沒有定義checkLoggedin()正確或可你錯了的方式使用。
你可以用也不同方式，使這裏靠近它，
上ng-model變量應用ng-if條件，

<label> User Name </label> 
<input ng-model="username" />

你可以在用戶名添加條件，如： -

<div ng-if="username !== 'null' || 'undefined'"> If username fielld is touched </div> 

<div ng-if="username === 'null' || 'undefined'"> If username field is not touched </div>

來源

2016-08-30 10:31:13

如何更改用戶登錄後的div

回答

相關問題