pokaż ukryty element po zalogowaniu użytkownika za pomocą angularjs - angularjs, jquery-mobile

Jestem stosunkowo nowy dla angularjs i jquery mobile.Poproszono mnie o wykonanie badań dla mojego następnego projektu na tych frameworkach, a więc próbuję osiągnąć pewne funkcje. Stworzyłem stronę główną, na której element jest ukryty, ta strona będzie wyświetlana na początku. Następnie, klikając na login, użytkownik zostanie przekierowany do strony logowania, gdzie podaje hasło do logowania. Następnie zostanie przekierowany na tę samą stronę tytułową, ale chcę, aby ukryty element był widoczny. Możesz mi pomóc z tym. Mój element jest zawsze ukryty i nie mogę co robię źle. Tag z cześć witam użytkownika tekst musi być widoczny po zalogowaniu

Oto moja strona główna 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>

Po kliknięciu przycisku logowania nastąpi przekierowanie do strony logowania

 <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>

Po kliknięciu zapisz, wykonam połączenie Ajax i po pomyślnym zalogowaniu zostanie przekierowany do strony głównej, a mój element logowania musi być widoczny.

To mój kontroler

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;
}

});

}
}

Mogę używać kontrolera źle lub może niewłaściwie używać ng-hide..Proszę pomóc, nie mogę tego zrozumieć

Odpowiedzi:

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

1. Spowoduje to wyświetlenie, czy element istnieje w kontrolerze pozostanie w ukryciu

2. Możesz tego użyć, więc po kliknięciu przycisku, jeśli wszystko jest dobry i użytkownik jest zalogowany, utwórz element, a następnie pozwól kontroler klasy wykona pracę za Ciebie

Osiągnąłem funkcjonalność za pomocą toggleclass Dodałem ten kod do kontrolera:

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

I to w moim HTML

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

Byłem w stanie uzyskać pożądany rezultat. Jeśli ktoś inny ma jakikolwiek inny sposób, aby to osiągnąć, proszę zasugeruj