用戶使用angularjs登錄后顯示隱藏的元素

Question

我對angularjs和jquery mobile相對較新。我被要求為這個框架做下一個項目的研究，所以我試圖實現某些功能。我創建了一個隱藏元素的首頁，這個頁面最初會顯示。然后點擊登錄，用戶將被重定向到登錄頁面，在那里他提供用戶名密碼登錄。然后他將被重定向到同一個首頁，但我希望隱藏的元素可見。你可以幫我這個。我的元素總是被隱藏，我無法弄清楚我做錯了什么。登錄后必須看到喜歡歡迎用戶文字的標簽

這是我的html首頁

 <div data-role="page"  id="panel-responsive-page1" data-title="Panel responsive page" data-url="panel-responsive-page1">
 <div role="main" class="ui-content">
                /**some content **/
            <div class="ui-grid-solo" ng-controller="LoginCtrl"  >
                <p ng-hide="userWelcome">Hi welcome User </p>
            </div>
        </div>
    <div data-role="panel"  id="nav-panel">
            <ul data-role="listview">
                <li><a href="#login-form">Login</a></li>
                <li><a href="#">Register</a></li>
            </ul>
        </div>
     </div>

點擊登錄后，我將被重定向到登錄頁面

 <div data-role="page" id="login-form">
        <!-- header -->
        <div data-role="header" class="backgroundColorPink">
            <h1>Login Form</h1>
        </div>
        <!-- Form Content -->
        <div role="main" class="ui-content jqm-content">
            <form class="userform">
                <h2>Login</h2>
                <label for="name">Username:</label>
                <input type="text" name="name" id="name" value="" data-clear-btn="true" data-mini="true"  ng-model="userDetails.name">
                <label for="password">Password:</label>
                <input type="password" name="password" id="password" value="" data-clear-btn="true" autocomplete="off" data-mini="true"  ng-model="userDetails.password">
                <div class="ui-grid-a" ng-controller="LoginCtrl">
                    <div class="ui-block-a"><a href="#" data-rel="close" class="ui-btn backgroundColorPink ">Cancel</a></div>
                    <div class="ui-block-b "><a href="#"  class="ui-btn backgroundColorPink" ng-click="userLogin()">Save</a></div>

                </div>

            </form>
        </div>
    </div>

點擊保存后，我將發出Ajax呼叫，成功登錄后，我將被重定向到首頁，我的登錄元素必須可見。

她的控制器

angular.module('jQMDemo', [])


function LoginCtrl($scope,$http,$window) {
$scope.userWelcome=true;
$scope.userLogin = function() {



     var data={username: $scope.userDetails.name, password: $scope.userDetails.password, callfrom: "Portal"} ;
         $http.post('url',data).success(function(data,status) {
             alert(data.status);
                    if(data.status=="success"){
                       $window.location.href='#panel-responsive-page1';
                       $scope.userWelcome=false;
                    }

         });

    }
}

我可能使用控制器錯誤或錯誤使用ng-hide ..請幫助，我無法弄明白

Answer 1

<div ng-show="element.show">
  <!--codes-->  
</div> 

1. 這將顯示控制器中是否存在該元素，否則它將保持隱藏狀態

2. 你可以使用它，所以當你點擊按鈕時如果一切都很好並且用戶被記錄了你創建元素然后讓類控制器為你工作

Answer 2

我使用toggleclass實現了功能我在控制器中添加了這段代碼：

 $(".userWelcome").toggleClass("show");

這在我的HTML中

<div class="ui-grid-solo hide userWelcome backgroundColorPink " >
     <p class="alignMiddle ">Hi welcome {{userDetails.name}} </p>
</div>

我能夠得到理想的結果。如果其他人有任何其他方法來實現這一點，請建議