ユーザーがangljsでログインした後に隠れ要素を表示する - angularjs、jquery-mobile

Iamはangularjsとjquerymobileに比較的新しいです。これらのフレームワークに関する次のプロジェクトの調査を依頼されたため、特定の機能を実現しようとしています。要素が非表示になっているフロントページを作成しました。このページが最初に表示されます。次に、ログインをクリックすると、ユーザーは次のようになります。ログインページにリダイレクトされ、ログインするためのユーザー名パスワードを提供します。その後、同じフロントページにリダイレクトされますが、非表示の要素を表示したいのですが、これを手伝ってくれませんか。私の要素は常に非表示になっていて、わかりません。 Iamが間違っていることを明らかにします。 こんにちはようこそユーザー ログイン後にテキストが表示される必要があります

これが私の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の使い方が間違っている可能性があります。助けてください。わかりません。

回答：

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

1. これにより、要素がコントローラーに存在するかどうかが表示されます。 隠されたままになります

2. あなたはこれを使うことができるので、あなたがボタンをクリックすると 良好であり、ユーザーがログに記録されているu要素を作成してから、 クラスコントローラーがあなたに代わって仕事をします

トグルクラスを使用して機能を実現しました 私はこのコードをコントローラーに追加しました：

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

そしてこれは私のHTMLで

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

私は望ましい結果を得ることができました。これを達成する他の方法が他にある場合は、提案してください